Question

我有一个包含HTML内容的JavaScript字符串。

e.g。

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不是window.onload
的函数

有没有将HTMLtext放在临时容器中的解决方法吗？

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()。要使用它，您必须使用document.createElement()创建一个元素，将innerHTML设置为html字符串，使用document.body.appendChild()将元素添加到DOM（可能是隐藏的，因此它不可见），然后使用document.getElementById（）（注意D是小写的）。但那将是一个临时容器。

jQuery确实简化了这一点。它仍然需要创建一个容器，但它不必附加到DOM。使用jQuery()创建元素并使用.html()设置html后，使用jQuery.find()查找包含id selector的元素。然后使用.html()获取找到的第一个元素的html内容。

＆＃13;

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());

＆＃13;

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

＆＃13;

来自Javascript String的innerHTML

3 个答案: