来自Javascript字符串的innerHTML答案

【问题标题】：innerHTML from Javascript String来自Javascript字符串的innerHTML
【发布时间】：2017-04-10 16:18:52
【问题描述】：

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

例如

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

【问题讨论】：

您的 HTMLtext 变量是字符串而不是 html 元素。您尝试做的与尝试 'this is some text.getElementById('id')` 相同。如果您想获得带有 id 的 div，则必须进行 som 正则表达式字符串搜索。您到底想完成什么？
永远不要使用正则表达式来解析 html。在 SO 上搜索以查看有关该主题的大量讨论。只需使用 jquery 或其他解析库对其进行解析即可。
我正在使用 AJAX 来获取查询的 responsetText，并且我想拆分返回的数据。我知道这是一个字符串，但我认为会有一些方法可以暂时转换它。我很好用 jQuery。

标签： javascript jquery html innerhtml getelementbyid

【解决方案1】：

由于问题标签中有 jQuery，这非常简单...

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

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

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

【讨论】：

这正是我要找的。出于某种原因，当我在 JSFiddle 中尝试它时它不起作用？ jsfiddle.net/fwueufef
好吧，我的错。除非您正在创建元素，否则您不能使用 $()。我已经修改它以创建一个空 div，添加您的 HTMLtext，然后解析有问题的 div。
谢谢。这里有几个很好的答案，但你的似乎用最简单的方式解决了我的问题。
没问题 - 乐于助人:)
如果你没有得到任何特定的 div id，你可以使用这个var testDiv1 = $("<div/>", { html: HTMLtext}).find("div").html(); BTW Good Solution @Archer

【解决方案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 可以遍历它。

【讨论】：

【解决方案3】：

正如 cmets 中提到的，没有字符串（原型）函数 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内容。

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

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：