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

Insert HTML as a String, without JQuery

本文关键字：JQuery 插入 HTML 字符串      更新时间：2023-09-26

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

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

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

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

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

两年后编辑：对于其他阅读的人来说，我对onload事件有一些严重的误解。我期望它对任何元素都是有效的事件，而它只对<body/>元素有效。.innerHTML是完成我想要的工作的合适方法，并且添加的元素的任何额外功能都需要以其他方式手动完成。

HTMLElement innerHTML属性

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

HTMLElementObject.innerHTML=text

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

您可以通过两种方式实现：

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

或object.innerHTML=text

我正在寻找一种将包含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'/>

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

普通JS。只需使用：element.insertAdjacentHTML（位置，文本）；

position="beforebegin"|"afterbegin"|"beforeeend"|"afterend"

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

appendChild和insertAdjacentHTML相对于insertHTML的一个重要优势（未提及）是，它们不需要重新分析div元素。

如果div中已经有其他元素，这将非常有用，因为例如，如果这些元素中的任何一个附加了事件，它们都会丢失它。此外，由于这个原因，它们更快。

相关文章：