来自 Javascript 字符串的 innerHTML

Question

我有一个 JavaScript 字符串，其中包含 HTML 内容。

例如

var HTMLtext = 'text <div id="test-div-1">this is <b>just</b> a div</div><div id="test-div-2">this is <b>just</b> another div</div> more filler text';

我希望从该字符串中的第一个 div 元素中获取 innerHTML。当我尝试使用：

var testDiv1 = HTMLtext.getElementByID("test-div-1");

我收到错误

HTMLtext.getElementByID is not a function at window.onload

有没有不将 HTML文本放入临时容器的解决方法？

JSFiddle

Answer 1

因为问题标签中有 jQuery 这很简单...

var testDiv1 = $("<div/>", { html: HTMLtext }).find("#test-div-1").html();

这会创建一个非 DOM 元素，设置 html 值，然后解析并获取您想要的 div 的内部 html。

Here's an updated version of your jsfiddle...

Answer 2

var HTMLtext = 'text <div id="test-div-1">this is <b>just</b> a div</div><div id="test-div-2">this is <b>just</b> another div</div> more filler text';
var tempDom = $('<output>').append($.parseHTML(HTMLtext));
$("#test-div-1",tempDom);

解析字符串以创建HTML并创建临时DOM以便jquery可以遍历它。

Answer 3

如评论中所述，没有字符串（原型）函数getElementByID。您可能会想到 document.getElementById(). To use that, you would have to create an element with document.createElement(), set the innerHTML to the html string, add the element to the DOM (perhaps hidden so it isn't visible) with document.body.appendChild()，然后使用 document.getElementById()（注意 D 是小写字母）。但这将创建一个临时容器。

jQuery 确实简化了这一点。它仍然需要创建一个容器，但不必附加到 DOM。使用 jQuery() and setting the html with .html(), use jQuery.find() to find the element with the id selector. Then use .html() 创建元素以获取找到的第一个元素的 html 内容后。

var HTMLtext = 'text <div id="test-div-1">this is <b>just</b> a div</div><div id="test-div-2">this is <b>just</b> another div</div> more filler text';
var testDiv1 = $('<div>').html(HTMLtext).find('#test-div-1');
console.log(testDiv1.html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

来自 Javascript 字符串的 innerHTML

innerHTML from Javascript String

html

javascript

jquery

innerhtml

getelementbyid