JavaScript的替代DOM元素

我想这样做：JavaScript的替代DOM元素

var htmlcode = '<div>testing</div>'; 
document.getElementById('initDiv').html = htmlcode;

还挺喜欢使用的innerHTML，但用元素本身。

有人可以帮我吗？谢谢

来源

2011-07-03 André Alçada Padez

更换** **什么元素？什么是你的html标记？ –

我的问题很简单。但我的HTML标记将是

blablabla

请不要告诉我，我可以使用innerHTML，因为我知道我可以，那不是我的问题。谢谢 –

你是否需要*在'htmlcode'变量的内部创建元素*？或者你会愿意使用'document.createElement（）'？ –

不，没有针对您的问题的本地跨浏览器解决方案。你可以做的最好的做法是拼凑一些能够以更加跨浏览器的方式工作的东西。

这里有一个解决方案：

function outerHTML(el, html) { 
    if ('outerHTML' in el) { // for most browsers 
     el.outerHTML = html; 
    } else {      // for Firefox 
     var temp = document.createElement('div'); 
     temp.innerHTML = html; 
     while (temp.firstChild) { 
      el.parentNode.insertBefore(temp.firstChild, el); 
     } 
     el.parentNode.removeChild(el); 
    } 
};

使用方法如下：

var initDiv = document.getElementById('initDiv'); 

outerHTML(initDiv, '<div>testing</div>');

例子：http://jsfiddle.net/6VUNU/1/

来源

2011-07-03 17:40:52 user113716

谢谢m8，完美的作品:) –

非常好！ +1 :) – AlienWebguy

有一个document.getElementById(...).outerHTML价值，你可以使用，但据我记得它并不适用于所有的浏览器。

来源

2011-07-03 17:17:06

谢谢，但我需要它跨浏览器 –

你总是可以找到initDiv的父亲createElement（'div'），用htmlcode填充它，然后在initDiv上使用removeElement。

来源

2011-07-03 17:21:41 AlienWebguy

这是一个好主意，但我会认为会有一些专注于此... –

一旦节点消失，它已经消失了。如果它只是一个div，您可以更改innerHTML，它将作为新的div显示给用户。如果您对某个游戏的DOM操作变得复杂，您可能需要查看jQuery，因为它可以使所有这些操作变得非常简单并且跨浏览器友好。 – AlienWebguy

我很欣赏它，但这是一个非常具体的学术项目，我不能使用任何外部库。 @patrick dw的回答非常适合我的需求... –

JavaScript的替代DOM元素

回答

相关问题