草庐IT

Javascript innerHTML 与 outerHTML

coder 2024-05-09 原文

我有以下 javascript:

// create a new article tag
var elem = document.createElement('article');

// append the article to the comments list
document.querySelector('#comments-list').appendChild(elem);

我想设置文章的内容，并向其中添加一些类，所以我正在寻找两种方法:

// Option 1
// set the content using .innerHTML()
// and add the classes manually to the classList 
elem.innerHTML = "This is the comment";
elem.classList.add('comment'); 

// Option 2
// set the content and classes in one go using .outerHTML()
elem.outerHTML = "<article class='comment'>This is the comment</article>";

两者都很好，但我注意到 .innerHTML 需要在元素附加到 DOM 之前调用，而 outerHTML 需要在添加到 DOM 之后调用DOM。

我更喜欢第二个选项，因为我实际上是在这个 javascript 文件中渲染 Rails 部分，并且有一个微妙的情况，它更可取。

我的问题是这些技术中的一种是否优于另一种？向 DOM 添加元素然后更改它的 HTML 是否有问题？或者从性能的 Angular 来看，在写入 DOM 之前设置 innerHTML 是否更好？

最佳答案

取自MDN-站点:

内部HTML

  • Element.innerHTML属性设置或获取描述元素后代的 HTML 语法。

Note: If a <div>, <span>, or <noembed> node has a child text node that includes the characters (&), (<), or (>), innerHTML returns these characters as &amp, &lt and &gt respectively. Use Node.textContent to get a correct copy of these text nodes' contents.

外部HTML

outerHTML element 的属性DOM 接口(interface)获取描述元素(包括其后代)的序列化 HTML 片段。它可以设置为用从给定字符串解析的节点替换元素。

innerHTML 与 outerHTML:

使用 innerHTML作为默认值。这仅替换当前元素引用的内部内容(如果使用“=”)。如果您使用 outerHTML ，那么所引用的元素将也被替换。

演示:

var h20 = document.getElementById("h20"),
    h21 = document.getElementById("h21");
var ran = false;

console.log("'h20' innerHTML (1) =", "'" + h20.innerHTML + "'", "outerHTML (1) =", "'" + h20.outerHTML + "'");
console.log("'h21' innerHTML (1) =", "'" + h21.innerHTML + "'", "outerHTML (1) =", "'" + h21.outerHTML + "'");

document.getElementById("button").onclick = evt => {
    if (ran) return false;
    
    h20.innerHTML = "<div>innerHTML</div>";
    h21.outerHTML = "<div>outerHTML</div>";
    
    console.log("'h20' innerHTML (2) =", "'" + h20.innerHTML + "'", "outerHTML (2) =", "'" + h20.outerHTML + "'");
    console.log("'h21' innerHTML (2) =", "'" + h21.innerHTML + "'", "outerHTML (2) =", "'" + h21.outerHTML + "'");
    
    ran = true
}
<button id="button">innerHTML vs. outerHTML</button>
<br>
<h2 id="h20"></h2>
<h2 id="h21"></h2>

关于Javascript innerHTML 与 outerHTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46941911/

JavascriptinnerHTMLcode34

有关Javascript innerHTML 与 outerHTML的更多相关文章

  1. javascript - 在 javascript 中更改 outerHTML - 2

    $(editor[i])[0].outerHTML的值为:somestring我想让data-mce-style="color:red;"消失。我这样做是这样的:$(editor[i])[0].outerHTML.replace('data-mce-style="color:red;"','');但它并没有取代它。 最佳答案 .replace创建一个新的转换后的字符串；它不会改变原始变量。您只是在创建一个新字符串，而不是将新字符串存储回outerHTML，比如:$(editor[i])[0].outerHTML=$(editor[i

  2. javascript - IE 中未定义的 outerHTML - 2

    我的代码从Ajax调用中获取JSON，其中包含XML，并通过它读取一些信息。虽然XML的解析在Chrome中运行良好，但在IE中却不行，因为在IE中outerHTML返回undefined。我浏览了几篇文章并尝试了几种可能的解决方案，但都没有成功。JavaScript代码是:$.ajax({url:'getJSONwithXML.do',type:'POST',data:'',dataType:'json',cache:false}).done(function(data){varjsonResp=JSON.parse(data.data.respuesta);varparser=ne

  3. javascript - IE 中的 InnerHTML/outerHTML 不反射(reflect)复选框状态，但在怪癖模式下除外 - 2

    我目前正在与一个IEJavaScript/DOM错误作斗争(这很有趣)，它确实难倒了我。有问题的代码将一些复选框复制到一个表单中，并且需要维护它们的选中状态。问题是，IE(特别是IE8，虽然我猜其他人也是如此)不想这样做。我已将错误本身缩小到一个非常小的测试用例。基本上，页面上没有DOCTYPE时一切正常，但当存在DOCTYPE时它们会被破坏。我的预料恰恰相反，但谁知道IE。以下是最简单的测试用例。对于它们中的每一个:在IE中打开页面，切换复选框，然后单击“测试”。不产生错误:TESTdocument.getElementById('break').onclick=function()

  4. javascript - outerHtml 在 IE 中为 SVG 元素返回 undefined - 2

    这是我的代码我在b上触发了鼠标移动事件$("#b").hover(function(){alert($(this)[0].outerHTML);});这在chrome中工作但在IE中不工作我该如何解决..请找到JSFiddle链接:http://jsfiddle.net/r8v70Lnk/警告框只会在chrome中显示，在IE中不会显示。 最佳答案 不知道这是否适合您，但我通常这样做:newXMLSerializer().serializeToString(document.querySelector('#b'))如果你想再次解析字

  5. javascript - 为什么使用自定义标签创建元素会在 IE9 或 10 的 outerHTML 中添加 xml 命名空间，直到调用 .find() 方法？ - 2

    我有一个演示问题的jsfiddle:http://jsfiddle.net/H6gML/8/$(document).ready(function(){//thisseemsfineinIE9and10var$div=$("");console.log("InIE,thisisjustfine:"+$div[0].outerHTML);//thisisweirdinIEvar$test=$("");console.log("However,thishasanxmltagprepended:\n"+$test[0].outerHTML);$test.find("test");console

  6. Javascript innerHTML 与 outerHTML - 2

    我有以下javascript://createanewarticletagvarelem=document.createElement('article');//appendthearticletothecommentslistdocument.querySelector('#comments-list').appendChild(elem);我想设置文章的内容，并向其中添加一些类，所以我正在寻找两种方法://Option1//setthecontentusing.innerHTML()//andaddtheclassesmanuallytotheclassListelem.inner

  7. javascript - 获取包含属性的开始标记 - 没有 innerHTML 的 outerHTML - 2

    我想从DOM中检索某个标记元素及其属性。例如，来自linktext我想得到,可选择结束，作为字符串或其他一些对象。在我看来，这类似于检索.outerHTML没有.innerHTML.最后，我需要它通过jQuery包装一些其他元素。我试过了varelem=$('#some-element').get(0);$('#some-other-element').wrap(elem);但是.get()返回包含其内容的DOM元素。还有varelem=$('#some-element').get(0);$('#some-other-element').wrap(elem.tagName).paren

  8. javascript - 为什么不能在 $(this) 上调用 outerHTML？ - 2

    当你想得到HTML对于整个DOM元素(包括包装器)，您可以执行以下操作(如here所述):$('#myElementId')[0].outerHTML但是您不能做的是在$(this)内部调用outerHTML，例如点击监听器或选择器函数主体范围:$(this).outerHTML//Doesn'tcompleteinIntelliSense,returnsundefinedinbrowser或$(this)[0].outerHTML//Correction,thisDOESwork,butitdoesn'tcompleteinIntelliSense因为在这些情况下IntelliSen

  9. javascript - 如何获取元素的 outerHTML、innerHTML 和 getText() - 2

    我是Protractor框架的新手，一段时间以来我一直在尝试弄清楚如何获取outerHTML/InnerHTML/getText()(子元素)，以便我可以测试元素是否为。被渲染到View上。注意，我们有一个ng-grid我试图在它的第一列中查找它是否包含img元素还检查它是否包含属性，即src=res/someImg.png.这是我得到的html......测试it('shouldrenderaniconinagentlist',function(){varrow=element.all(by.repeater('rowinrenderedRows')).get(3);expect(r

  10. javascript - 什么时候应该在 JavaScript 中使用 outerHTML？ - 2

    关闭。这个问题需要更多focused.它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题editingthispost.关闭5年前。Improvethisquestion何时应该使用innerHTML和outerHTML之间有什么区别。您将如何最好地实现outerHTML来替换或添加内容？

随机推荐