document.write（）;刪除其他HTML

我正在做一個評論事情的測試。我只想要一個小文本框，在其中鍵入內容和一個表示「添加註釋」的按鈕，將document.write（）;在添加註釋事件下的文本框中放入了什麼。但我遇到了一個問題，其中document.write（）;似乎正在刪除所有其他寫在javascript邊的HTML（即textarea和「添加評論」按鈕）。當我按下「添加評論」按鈕時，我在文本區寫的內容填滿了整個屏幕，似乎正在弄髒其餘部分。這裏是我的代碼：document.write（）;刪除其他HTML

<html> 
<head> 
<script language="JavaScript"> 
    function add1(){ 
    var tf = document.getElementById('tf'); 
    add2(tf.value); 
    } 
</script> 
</head> 
<body> 
<p>Type stuffz here:</p> 
<textarea id="tf" wrap="logical" rows="10" cols="50"></textarea> 
<!--<input type="textfiel" id="tf" value="Test">--> 
<br> 
<input type="button" onClick="add1()" value="Add Comment" > 

<script type = "text/javascript"> 
function add2(input){ 
    document.writeln(input); 
} 
</script> 
</body> 
</html>

來源

2013-11-28 user3047146

此行爲是設計使然。不要使用'document.write（）'。 – SLaks

這個Q很可能是重複的 –

看起來正確-------> – mplungjan

不能使用document.write一旦該文件已完成加載。如果你這樣做，那麼瀏覽器將打開一個新的文檔，並將其替換爲當前的文檔。所以它的設計行爲document.write

這將是更好地使用innerHTML把HTML裏面元素

嘗試這樣的：

<html> 
<head> 
<script language="JavaScript"> 
    function add1(){ 
    var tf = document.getElementById('tf'); 
    add2(tf.value); 
    } 
</script> 
</head> 
<body> 
<p id="test">Type stuffz here:</p> 
<textarea id="tf" wrap="logical" rows="10" cols="50"></textarea> 
<!--<input type="textfiel" id="tf" value="Test">--> 
<br> 
<input type="button" onClick="add1()" value="Add Comment" > 

<script type = "text/javascript"> 
function add2(input){ 

    var test = document.getElementById('test'); 
    test.innerHTML = input; 
} 
</script> 
</body> 
</html>

還要檢查Why is document.write considered a 「bad practice」?

來源

2013-11-28 19:48:26

其他的評論是正確的：document.write()不是你想要使用的東西。您仍然可以在一些關於JavaScript的舊書中看到這種方法，但是由於許多原因我不會在這裏進行修改，這實際上是修改文檔的一種可怕方式。

然而，沒有人建議你可以做什麼，所以我會指出你正確的方向。

如果要修改HTML中的元素，最好的方法是使用DOM對象的innerHTML屬性。例如，假設您有要添加文本的<div id="output">。你會先到達那個DOM元素正是如此一個參考：

var outputDiv = document.getElementById('output');

然後你就可以完全改變的內容是<div>：

outputDiv.innerHtml = 'Hello world!';

或者你可以追加到它：

outputDiv.innerHtml = outputDiv.innerHtml + '<br>Hello world!';

或者更加緊湊與+=運營商（謝謝nplungjan）：

outputDiv.innerHtml += '<br>Hello world!';

你也應該在某個時候看jQuery，這會給你一整套的便利功能，讓這些操作變得簡單。

我希望這會讓你處於正確的方向。

來源

2013-11-28 19:53:20

請使用+ =，如果您追加 – mplungjan

Point採取，mplungjan。然而，OP顯然是非常新的，所以我選擇不使用帶附加賦值操作符來明確發生了什麼。一心一意！ –

儘管我會更新我的答案以包含此選項。 –

好吧，不要使用文檔編寫，你應該追加或填充到目標元素，我修改了一下你的代碼，它可能會幫助你。

<html> 
<head> 
<script language="JavaScript"> 
    function add1(){ 
    var tf = document.getElementById('tf'); 
    add2(tf.value); 
    } 
</script> 
</head> 
<body> 
<p id="test">Type stuffz here:</p> 
<textarea id="tf" wrap="logical" rows="10" cols="50"></textarea> 
<!--<input type="textfiel" id="tf" value="Test">--> 
<br> 
<input type="button" onClick="add1()" value="Add Comment" > 

<script type = "text/javascript"> 
function add2(input){ 

    var test = document.getElementById('test'); 
    test.innerHTML = input; 
} 
</script> 
</body> 
</html>

如果你想從原來的文件只追加，你可以使用它作爲

test.innerHTML = test.innerHTML + input;

此外

How to append data to div using javascript?

來源

2013-11-28 19:54:46

不要使用document.write()。相反使用innerHTML

注意：您的代碼不會像您使用的那樣工作tf.value其中tf是沒有value屬性的textarea的對象。所以我建議使用innerHTML。

<html> 
<script language="JavaScript"> 
    <head> 
function add1(){ 
    var tf = document.getElementById('tf'); 
    add2(tf.innerHTML); 
    } 
</script> 
</head> 
<body> 
<p id="test">Type stuffz here:</p> 
<textarea id="tf" wrap="logical" rows="10" cols="50"></textarea> 
<!--<input type="textfiel" id="tf" value="Test">--> 
<br> 
<input type="button" onClick="add1()" value="Add Comment" > 

<script type = "text/javascript"> 
function add2(input){ 

    var test = document.getElementById('test'); 
    test.innerHTML = input; 
} 
</script> 
</body> 
</html>

來源

2013-11-28 19:58:51

document.write（）;刪除其他HTML

回答

相關問題