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元素

回答

相關問題