将 HTML 作为字符串插入，不使用 JQuery答案

【问题标题】：Insert HTML as a String, without JQuery将 HTML 作为字符串插入，不使用 JQuery
【发布时间】：2012-07-10 21:16:04
【问题描述】：

我正在寻找一种将包含 HTML 数据的字符串插入 div 元素的方法。该字符串是通过 XHR 加载的，无法知道其中包含哪些元素等。

我四处搜索了一下，发现了一些可能对我有帮助但并不完全适合我的东西。我需要的是类似于 Prototype 框架中的 update() 函数的东西： http://prototypejs.org/api/element/update

我正在编写的平台不允许使用框架或 JQuery。我被 Javascript 困住了。有人有什么想法吗？

我不能使用 innerHTML，因为它不会应用任何更新或功能，或者基本上任何应该在加载时发生的事情

我有一些onload 事件需要发生，据我所知，使用innerHTML 不会执行onload 事件。我错了吗？

2 年后编辑：对于其他阅读者，我对onload 事件有一些严重的误解。我希望它对任何元素都是有效的事件，而它仅对<body/> 元素有效。 .innerHTML 是我正在寻找的正确方法，添加元素的任何额外功能都需要以其他方式手动完成。

【问题讨论】：

搜索“innerHMTL”。会有很多例子和论据支持/反对它。
我不能使用 innerHTML，因为它没有应用任何更新或功能，或者基本上任何应该在加载时发生的事情......
更好地解释你的问题，每个人都回答了关于innerHTML的问题，我仍然认为它可以解决你的问题。
@Serge 我用document.createTextNode() 写了一个答案，这可能就是你要找的东西

标签： javascript dom xmlhttprequest element

【解决方案1】：

HTMLElement innerHTML Property

innerHTML 属性设置或返回元素的内部 HTML。

HTMLElementObject.innerHTML=text

示例：http://jsfiddle.net/xs4Yq/

【讨论】：

【解决方案2】：

您可以通过两种方式做到这一点：

var insertText = document.createTextNode(theText);
                 document.getElementById("#myid").appendChild(insertText);

或 object.innerHTML=text

【讨论】：

【解决方案3】：

我正在寻找一种将包含 HTML 数据的字符串插入 div 元素的方法。

您要使用的是innerHTML 属性。

使用示例：

<script type="text/javascript">
function changeText(){
    document.getElementById('boldStuff').innerHTML = '<p>Universe</p>';
}
</script>
<p>Hello <b id='boldStuff'>World</b> </p> 
<input type='button' onclick='changeText()' value='Change Text'/>

【讨论】：

【解决方案4】：

你的意思是这样吗？：http://jsfiddle.net/FgwWk/1 或者在添加更多内容之前，您的 div 中是否已有内容？

【讨论】：

【解决方案5】：

纯 JS。只需使用： element.insertAdjacentHTML(position, text);

位置 = "开始前" | "之后" | “提前” | “事后”

var text = '<a  class="btn btn-blue btn-floating waves-effect">\n' +
            '<i class="fas fa-user"><span class="badge badge-danger"></span></i>\n' +
            '</a>';
var inputPlace = document.getElementById("input-pace");

inputPlace.insertAdjacentHTML("beforeend", text);

【讨论】：