最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - why does innerHTML append a comma - Stack Overflow

programmeradmin5浏览0评论
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="media/js/jquery.js"></script>
<script>
var table = "";
var example_array = [];

function tablething() {
    index = document.getElementById("location").value;
    value = document.getElementById("input_value").value;
    addRow(index,value);
}

function addRow(index,value){
     var rowBeg = "<tr><td>";
     var rowEnd = "</td></tr>";

     value = rowBeg + value + rowEnd;
     example_array.splice(index,0,value);
     console.log(example_array);
     table.innerHTML = example_array;
     console.log(table.innerHTML);
}

$( document ).ready(function() {
    table = document.getElementById("example");
    example_array = new Array();
});
</script>
</head>
<body>

<table id="example">
</table>

Location: <input type="text" id="location"/>
Value: <input type="text" id="input_value"/>
<button onclick="tablething()">Add</button>

</body>
</html>

The results in the console were

Array [ "<tr><td>0</td></tr>" ] dyna_row.html:21
"<tbody><tr><td>0</td></tr></tbody>" dyna_row.html:23
Array [ "<tr><td>0</td></tr>", "<tr><td>1</td></tr>" ] dyna_row.html:21
"<tbody><tr><td>0</td></tr><tr><td>1</td></tr></tbody>," dyna_row.html:23
Array [ "<tr><td>0</td></tr>", "<tr><td>1</td></tr>", "<tr><td>2</td></tr>" ] dyna_row.html:21
"<tbody><tr><td>0</td></tr><tr><td>1</td></tr><tr><td>2</td></tr></tbody>,," dyna_row.html:23
Array [ "<tr><td>0</td></tr>", "<tr><td>1</td></tr>", "<tr><td>2</td></tr>", "<tr><td>3</td></tr>" ] dyna_row.html:21
"<tbody><tr><td>0</td></tr><tr><td>1</td></tr><tr><td>2</td></tr><tr><td>3</td></tr></tbody>,,,"

My doubt is

  1. why is this code adding a ma at the end of the innerHTML each time the method addRow is called?

  2. example_array.join("") seems to achieve what i am intending to do but is the toString method also not returning the same content as the join method?

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="media/js/jquery.js"></script>
<script>
var table = "";
var example_array = [];

function tablething() {
    index = document.getElementById("location").value;
    value = document.getElementById("input_value").value;
    addRow(index,value);
}

function addRow(index,value){
     var rowBeg = "<tr><td>";
     var rowEnd = "</td></tr>";

     value = rowBeg + value + rowEnd;
     example_array.splice(index,0,value);
     console.log(example_array);
     table.innerHTML = example_array;
     console.log(table.innerHTML);
}

$( document ).ready(function() {
    table = document.getElementById("example");
    example_array = new Array();
});
</script>
</head>
<body>

<table id="example">
</table>

Location: <input type="text" id="location"/>
Value: <input type="text" id="input_value"/>
<button onclick="tablething()">Add</button>

</body>
</html>

The results in the console were

Array [ "<tr><td>0</td></tr>" ] dyna_row.html:21
"<tbody><tr><td>0</td></tr></tbody>" dyna_row.html:23
Array [ "<tr><td>0</td></tr>", "<tr><td>1</td></tr>" ] dyna_row.html:21
"<tbody><tr><td>0</td></tr><tr><td>1</td></tr></tbody>," dyna_row.html:23
Array [ "<tr><td>0</td></tr>", "<tr><td>1</td></tr>", "<tr><td>2</td></tr>" ] dyna_row.html:21
"<tbody><tr><td>0</td></tr><tr><td>1</td></tr><tr><td>2</td></tr></tbody>,," dyna_row.html:23
Array [ "<tr><td>0</td></tr>", "<tr><td>1</td></tr>", "<tr><td>2</td></tr>", "<tr><td>3</td></tr>" ] dyna_row.html:21
"<tbody><tr><td>0</td></tr><tr><td>1</td></tr><tr><td>2</td></tr><tr><td>3</td></tr></tbody>,,,"

My doubt is

  1. why is this code adding a ma at the end of the innerHTML each time the method addRow is called?

  2. example_array.join("") seems to achieve what i am intending to do but is the toString method also not returning the same content as the join method?

Share Improve this question edited Aug 4, 2014 at 18:44 Thirumalai Parthasarathi asked Aug 4, 2014 at 18:24 Thirumalai ParthasarathiThirumalai Parthasarathi 4,6712 gold badges27 silver badges44 bronze badges 10
  • because... arrays have mas when stringified? hmm... – Kevin B Commented Aug 4, 2014 at 18:26
  • @KevinB why are the mas at the end and not between each value.. if you look at the console output i have given you can see that the mas are appended at the end. – Thirumalai Parthasarathi Commented Aug 4, 2014 at 18:27
  • 1 Not an answer, butwhy are you assigning an array to innerHTML? – dee-see Commented Aug 4, 2014 at 18:28
  • 2 probably due to the way the browser added the tbody, and the fact that a ma between two <tr> tags is invalid markup. The browser auto-corrected it by moving the ma to outside the tbody. – Kevin B Commented Aug 4, 2014 at 18:28
  • 3 You should use table.innerHTML = example_array.join("");. When the browser tries to stringify your array, it converts it to "..", "..." (probably by using join without parameters which got "," as standard-separator) which causes invalid html as @KevinB says and produces the output you got. – jbrosi Commented Aug 4, 2014 at 18:31
 |  Show 5 more ments

1 Answer 1

Reset to default 10

When an array is converted to a string, it adds mas between the values.

This will use spaces between the values instead

table.innerHTML = example_array.join(" ");
发布评论

评论列表(0)

  1. 暂无评论