Вставьте HTML, используя jquery .html ()

Question

Я хочу вставить большой кусок html в уже существующий <td>. Я использую этот метод:

 $("td#content").html(LOTS_OF_HTML_CODE_HERE);

Но это не работает. Я новичок, есть много цитат и ' внутри фрагмента HTML, который, кажется, нарушает его. Какой правильный метод для этого?

Answer 1

Я бы предложил объединить HTML в одну строку ... вот так.

htmlStr = "";
htmlStr += "<p>some paragraph";
htmlStr += "<p>another paragaraph</p>";

$("#content").html(htmlStr);

таким образом вы можете увидеть, где ваш html ломается, и это добавляет читабельности к контенту, созданному javascript.

Кроме того ...

если в этом TD есть контент, который вы хотели бы сохранить, я бы использовал append() метод jquery.

---

документация jquery ваш лучший друг!

Answer 2

Javascript не имеет хорошей поддержки многострочных строк или синтаксиса HEREDOC, но есть несколько обходных путей.

Добавьте обратную косую черту "\" в конце каждой строки, чтобы дать знать движку сценарияВы продолжаете переход к следующей строке, не заканчивая:

<script>
var my_html = '\
    <div id="my-div">\
        <span>Name:</span> Your Name\
    </div>\
';
</script>

Использовать хак XML CDATA (http://mook.wordpress.com/2005/10/30/multi-line-strings-in-javascript/):

<script>
var my_html = (<r><![CDATA[

    <div id="my-div">
        <span>Name:</span>Your Name
    </div>

]]></r>).toString();
</script>

Answer 3

То, что я хотел бы сделать, это поместить весь этот HTML в div согласно: <div id="myHTML" style="display: none;">LOTS OF HTML HERE</div>, а затем, когда сделаете это:

$("td#content").html($("#myHTML").html());

В чем может быть проблема, это разрывы строк.Если у вас есть строка (заключенная в «» или «»), вы обнаружите, что разрывы строк «сломают» ваш код ... поэтому вам придется поместить весь HTML-код в одну строку.

Answer 4

Если он приходит по ссылке, вы, вероятно, захотите сделать это с AJAX:

$("#YOUR_ELEMENT").load("THE_CONTENT_TO_LOAD");

Однако имейте в виду, что если вы пытаетесь извлечь HTML с сайта в другом домене, вам нужно будет использовать прокси-серверы и все такое ... вроде как за пределами вопроса.

Answer 5

Если кавычки нарушают ваш код, попробуйте это ...

$("td#content").html("<a href=\"http://www.example.com\">my link</a>");

Цитаты не экранируются. Просто добавьте обратную косую черту перед кавычками, двойными или одинарными в вашем HTML-коде Это должно сделать это. ;)

Answer 6

Стефан прав, но чтобы ответить на ваш вопрос с кавычками, не забывайте избегать ничего, что могло бы его сломать, поэтому, если у вас есть html("<a href='#' onclick='dofunction("text")'>...etc...");, это должно быть html("<a href='#' onclick='dofunction(\"text\")'>...etc...");, чтобы двойные кавычки нечитать буквально.

Answer 7

Вы, вероятно, должны создавать свои элементы с помощью jquery, а не в виде большой строки.Вы не можете быть уверены в правильности dom, если просто используете большую строку, а отладку или изменение почти невозможно.

Это похоже на сборку xml вручную.Это просто не предпочтительный способ сделать это.