动态地将返回数据中的文本添加到具有匹配id的div中

时间:2017-02-20 18:30:41

标签: javascript jquery arrays html5

首先,我几乎仍然是一个新手,而且还在学习,我已经学到了很多东西,并希望在我继续这个旅程的过程中继续学习。 好的,所以我有以下代码,并尝试将数组对象附加到具有匹配ID的正确Div。我已经尝试了一个if语句不起作用,然后一个Switch语句也没有运气。任何人都可以向我说正确的方向,评论文本必须附加到具有相同ID的匹配div。

HTML Divs

<div class="containerA" id='text b'></div>

<div class="containerA" id='text a'></div>

的JavaScript

var myArray = [
  a = {
     text: 'text a',
     comment: 'comment a'
      },
  b = {
     text: 'text b',
     comment: 'comment b'
      },
  c = {
     text: 'text a',
     comment: 'comment c'
      },
  d = {
     text: 'text a',
     comment: 'comment d'
      },
  e = {
     text: 'text b',
     comment: 'comment e'
      }
       ];

for (var i = 0; i < myArray.length; i++) {
    console.log(myArray[i]);
    var row = myArray[i];
    console.log(row.text);
    var textRef = row.text;
    var commentsText = row.comment;
    console.log(commentsText);
    }

var myContainer = document.getElementsByClassName('containerA');

for (var i = 0; i < myContainer.length; i++) {
    console.log(myContainer[i].attributes[1].nodeValue);
    var idRef = myContainer[i].attributes[1].nodeValue;
    }

2 个答案:

答案 0 :(得分:4)

试试这个:

myArray.forEach( function(item){
           document.getElementById( item.text ).innerHTML = item.comment;
    }); 

如果要求是追加而不是每次都提供新文本:

    myArray.forEach( function(item){
           var newestComment = document.createTextNode( item.comment );
           document.getElementById( item.text ).appendChild( newestComment  );
    }); 

答案 1 :(得分:0)

您的pandas 0.18.1等于textRef字段,因此请使用id抓取$('#' + textRef),然后使用div添加append()到div

commentsText

如果您想“只使用javascript”,请使用以下代码:

$('#' + textRef).append(commentsText + "<br>")

var div = document.getElementById('textRef');

div.innerHTML = div.innerHTML + commentsText  + '<br />';
var myArray = [
  a = {
     text: 'text_a',
     comment: 'comment a'
      },
  b = {
     text: 'text_b',
     comment: 'comment b'
      },
  c = {
     text: 'text_a',
     comment: 'comment c'
      },
  d = {
     text: 'text_a',
     comment: 'comment d'
      },
  e = {
     text: 'text_b',
     comment: 'comment e'
      }
       ];

for (var i = 0; i < myArray.length; i++) {
    var row = myArray[i];
    var textRef = row.text;
    var commentsText = row.comment;
    $('#' + textRef).append(commentsText + "<br>")
    }

var myContainer = document.getElementsByClassName('containerA');

for (var i = 0; i < myContainer.length; i++) {
    var idRef = myContainer[i].attributes[1].nodeValue;
    console.log(idRef)
    }