[英]How to Append Value to an Array from Input Text in Javascript?
[英]How to append text from array in paragraph in javascript?
如何用數組中的文本附加段落?
首先,我將元素放入數組:
var iminja = [];
iminja.push("Name1");
然后,我for
數組“ iminja”中的每個元素使用for
循環,在其中我要將新段落與數組中的文本放到現有的空div
。 像這樣的東西,只是為了向您解釋我如何成為函數的最終結果:
$('#existingDiv').append('<p style="border: 1px solid black;">iminja[index]</p>');
有人可以幫我嗎?
以下代碼可以解決問題:
$.each(iminja, function () {
$("#existingDiv").append("<p style=\"border: 1px solid black;\">" + this + '</p>');
});
還是不使用$.each
函數
for (var item in iminja) {
$("#existingDiv").append("<p style=\"border: 1px solid black;\">" + iminja[item] + '</p>');
}
或根本不使用jQuery
var container = document.getElementById("existingDiv");
for (var item in iminja) {
var paragraph = document.createElement("p");
paragraph.setAttribute("style", "border: 1px solid black;");
paragraph.innerHTML = iminja[item];
container.appendChild(paragraph);
}
$('#existingDiv').append('<p style="border: 1px solid black;">'+iminja[index]+'</p>');
不
$('#existingDiv').append('<p style="border: 1px solid black;">iminja[index]</p>');
要遍歷數組,可以使用forEach
:
iminja.forEach(addp);
這將調用addp()
中的每個元素iminja
。 這是實現該功能的方式:
function addp(str)
{
var par = document.createElement('P');
par.setAttribute('style', 'border: 1px solid black');
par.appendChild(document.createTextNode(str));
document.getElementById('existingDiv').appendChild(par);
}
它創建一個新的<p>
元素,指定文本內容和所需的樣式,然后將其附加到現有的元素容器中。
測試這個文件
完整的HTML頁面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dimac</title>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<div id="existingDiv">
<p>Some texts in #existingDiv</p>
</div>
<script type="text/javascript">
var iminja = [];
iminja.push('Name1');
iminja.push('Name2');
iminja.push('Name3');
iminja.push('stackoverflow');
iminja.push('Dimac');
iminja.push('Ersin Basaran');
iminja.push('Jack');
iminja.push('Adnan');
/*
//Example1 by Ersin Basaran ( edited by Adnan )
$.each(iminja,function(){
$('#existingDiv').append('<p style="border: 1px solid #000;">'+this+'</p>');
});
*/
/*
//Example2 by Ersin Basaran ( edited by Adnan )
for(i in iminja){
$('#existingDiv').append('<p style="border: 1px solid #000;">'+iminja[i]+'</p>');
};
*/
//Example3 by Adnan
for(i=0;i<iminja.length;i++){
$('#existingDiv').append('<p style="border: 1px solid #000;">'+iminja[i]+'</p>');
}
/*
//Example4 by Jack ( edited by Adnan )
function addp(str){
$('#existingDiv').append('<p style="border:solid 1px #000;">'+str+'</p>');
}
for(i=0;i<iminja.length;i++){
addp(iminja[i]);
}
*/
</script>
</body>
</html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.