遍历数组并将结果输出到html

Question

我有这个方法say（），它有两个参数。 这是原型的属性，因此多个对象将使用它。

我想获取它返回的那些值，循环遍历它们，并将它们输出到我的html中。 我不知道的部分是，如何将每个单独的段落标签作为目标，使其与每个变量生成结果中每个变量的输出相对应？ 这需要双循环吗？ 我迷路了。 var para = document.querySelectorAll（'p'）;

var speak = function(what, job) {
    var whoWhat = this.name + ' says, ' + what,
        whoJob = this.name + "'s job is: " + job;
    console.log(whoWhat);
    console.log(whoJob);
    return whoWhat, whoJob;
};

function Peep(name, job) {
    this.name = name;
    this.job = job;
}

Peep.prototype.speak = speak;

var randy = new Peep('Randy', 'lawyer');
randy.speak('"blahblah"', randy.job);

var mandy = new Peep('Mandy', 'mom');
mandy.speak('"woooooaahhhh"', mandy.job);

这是一个jsfiddle

Answer 1

检查一下-jsFiddle

继续将HTML添加到文本中。 最后将它们添加到DOM中。

var speak = function(what, job) {
    var whoWhat = this.name + ' says, ' + what,
        whoJob = this.name + "'s job is: " + job;
    console.log(whoWhat);
    console.log(whoJob);
    return "<p>"+whoWhat+", "+whoJob+"</p>";
};

var txt = "";
var randy = new Peep('Randy', 'lawyer');
txt+=randy.speak('"blahblah"', randy.job);

var mandy = new Peep('Mandy', 'mom');
txt+=mandy.speak('"woooooaahhhh"', mandy.job);
document.getElementById('result').innerHTML = txt;

//in HTML add the result node
<body>
  <p id='result'>
  </p>
</body>

Answer 2

使用JavaScript，您可以访问DOM（文档对象模型）并将新元素追加到现有元素。 例如，您可以创建一个新的段落元素，并将该段落元素添加到ID为“ result”的现有div中。 这是一个例子：

 var appendText = function (text, parentId) {
     var para = document.createElement("p");
     var node = document.createTextNode(text);
     para.appendChild(node);
     var parentElement = document.getElementById(parentId);
     parentElement.appendChild(para);
 }

 var speak = function (what, job) {
     var whoWhat = this.name + ' says, ' + what,
         whoJob = this.name + "'s job is: " + job;
     return [whoWhat, whoJob];
 };

 function Peep(name, job) {
     this.name = name;
     this.job = job;
 }

 Peep.prototype.speak = speak;

 var randy = new Peep('Randy', 'lawyer');
 var randySays = randy.speak('"blahblah"', randy.job);
 appendText(randySays[0], "result");
 appendText(randySays[1], "result");

 var mandy = new Peep('Mandy', 'mom');
 var mandySays = mandy.speak('"woooooaahhhh"', mandy.job);
 appendText(mandySays[0], "result");
 appendText(mandySays[1], "result");

这是带有所需html的jsfiddle： http : //jsfiddle.net/stH7b/2/ 。 您还可以在此处找到有关如何将段落添加到DOM的更多信息： http : //www.w3schools.com/js/js_htmldom_nodes.asp

遍历数组并将结果输出到html

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-04-13 05:15:20

解决方案2
1 2014-04-13 05:32:13

遍历数组并将结果输出到html

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-04-13 05:15:20

解决方案2 1 2014-04-13 05:32:13

解决方案1
1 已采纳 2014-04-13 05:15:20

解决方案2
1 2014-04-13 05:32:13