的JavaScript創建內容

我有一個文本區域（從我取號）和按鈕提交值，我試圖將內容添加到由該回路中產生一個段落：的JavaScript創建內容

var countNum = document.getElementById(num).value; 
var entNum = parseInt(countNum); 

for(i=1;i<=entNum;i++){ 
    if(i%3!==0 && i%7!==0){ 
     document.write(i + "<br>"); 
    } 
}

現在當我使用document.write當然以前的內容被覆蓋，但我想有一個段落下的按鈕，從循環和他們接收生成的數字。什麼是正確的做法？

來源

2012-10-15 Aleksandar Ivanov

生成一個變量您的HTML構建段落。然後將其插入段落 – AMember

轉到並閱讀[DOM教程]（http://www.w3.org/wiki/Web_Standards_Curriculum#JavaScript_core_skills） – Quentin

讓我們假設你有你的按鈕，在這裏您可以把你的東西，在下面的容器：

<button [...] /> 
<div id="myContainer"></div>

然後你就可以填充容器調用

var myContainer = document.getElementById("myContainer"); 
var paragraph = document.createElement("p"); 
paragraph.appendChild(document.createTextNode("YourNumberOrTextHere")); 
myContainer.appendChild(paragraph);

你會發現其餘的部分！ ;）

編輯：按照你的意見，作如下補充：

要刪除一個元素，你需要對它的引用。

通過ID：

//Create element and give it a unique ID 
var paragraph = document.createElement("p"); 
paragraph.id = "element1"; 
//Now you can get it like this 
var paragraph = document.getElementById("element1");

通過標籤名：

//Request all elements with a certain tag name 
var paragraphs = document.getElementsByTagName("p"); 
//or only those of our container: 
var paragraphs = document.getElementById("myContainer").getElementsByTagName("p"); 
//Now you can mess with all of them like this: 
var paragraph = paragraphs[0]

通過參考：

//Just reuse the variable you used when you created your element 
var paragraph = document.createElement("p"); 
//use paragraph

更多找出：

;)

NOW：刪除它：

你必須告訴parentContainer，它應該刪除的子元素。幸運的是，每一個元素保存到其父的引用：

paragraph.parentElement.removeChild(paragraph);

來源

2012-10-15 13:37:20 Nippey

是的，這是IMO的最佳方法。 [Live test case]（http://jsfiddle.net/5SMuQ/）使用這個概念。 –

非常感謝，它非常完美！現在我將嘗試找出如何刪除以前的內容並在其中添加新內容。 –

做這樣的事情：

var countNum = document.getElementById(num).value; 
var entNum = parseInt(countNum); 
var html = '' 

for(i=1;i<=entNum;i++){ 
    if(i%3!==0 && i%7!==0){ 
     html += i + "<br>"; 
    } 
}

，然後在任何地方插入HTML你需要它...

來源

2012-10-15 13:37:26 AMember

您可以設置用於例如容器元素的innerHTML。

<button>Click Me</button> 
<div id="container"></div> 

document.getElementById('container').innerHTML = content;

另一種選擇是使用DOM API

來源

2012-10-15 13:37:51 shyam

的JavaScript創建內容

回答

相關問題