Question

我有一个文本区域，在此文本区域内，动态HTML内容的绑定方式类似于

<div id="HDWebAllTemplateHTMLListMessage">
    <div id="header">This is a header</div>
    <div class="main">
      <div id="content">This is my main content.</div>
      <div id="sidebar">This is a sidebar</div>
    </div>
    <div id="footer">This is my footer</div>
</div>

我想在 .main 类中包含html内容。我尝试过但无法获取html内容。

var textAreaContent=$($('#HDWebAllTemplateHTMLListMessage').text());
var divContent=textAreaContent.find('.main');
console.log(divContent.innerHTML);

Answer 1

您真的需要使用textarea吗？

您可以尝试如下操作。但是，如果您不需要它。 azizsagi示例工作正常。

JAVASCRIPT

var newdiv1 = $("<div class='dummy'></div>");
$("textarea").after(newdiv1); /* create dummy div */
var tgt = newdiv1;
var main = tgt.html($("textarea").text()).find(".main").text();
tgt.text(main);
/* newdiv1.remove(); */ // If you want to remove the element after you get what you need

JSFiddle：https://jsfiddle.net/synz/amgtLwex/

Answer 2

text()为您提供文本内容，而不是html，因此将其包装在$()中将不起作用。使用html()。

$('#HDWebAllTemplateHTMLListMessage .main').html()

Answer 3

您可以通过将js脚本更改为以下内容来获得结果

<script>
var textAreaContent=$('#HDWebAllTemplateHTMLListMessage > .main').html();
console.log(textAreaContent);
</script>

这是运行示例

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>

<div id="HDWebAllTemplateHTMLListMessage">
    <div id="header">This is a header</div>
    <div class="main">
      <div id="content">This is my main content.</div>
      <div id="sidebar">This is a sidebar</div>
    </div>
    <div id="footer">This is my footer</div>
</div>
<script>
var textAreaContent=$('#HDWebAllTemplateHTMLListMessage > .main').html();
console.log(textAreaContent);
</script>
</body>
</html>

从JQuery中的字符串中提取HTML内容

3 个答案: