Question

我试图制作一个每隔7天显示不同字符串的javascript函数。我想在html的页脚中显示该字符串。让我烦恼的部分是如何在html（或任何将显示文本）的段落中插入该字符串。我在.js中有二维数组，让我们说：

array = [[first1,first2],[second1,second2],[third1,third2],[fourth1,fourth2],[fifth1,fifth2]];

我想要显示，让我们说

array[2][0] in one paragraph and
array[2][1] in another paragraph.

让我们说

<div>
    <p>In here i want array[2][0]</p>
    <p>In here i want array[2][1]</p>
</div>

请帮忙。

Answer 1

HTML：

<div>
    <p>In here i want <span id="placeholder-1"></span></p>
    <p>In here i want <span id="placeholder-2"></span></p>
</div>

JS：

document.getElementById('placeholder-1').innerHTML = array[2][0];
document.getElementById('placeholder-2').innerHTML = array[2][1];

小提琴：http://jsfiddle.net/8N95j/

Answer 2

按document.getElementById/getElementsByClassName选择html元素并附加js值，如

var ele = document.getElementById('footerid');
ele.innerHTML += array[2][0];

注意： getElementsByClassName会给你一个数组

更新

这是使用相同标记共享的working fiddle。

Answer 3

一种不同的方法是使用像Ember或AngularJS这样的框架。现在这些很容易实现，并且更容易维护代码。例如，您的HTML看起来像

<div ng-controller='MyController'>
    <p>In here i want {{ array[2][0] }}</p>
    <p>In here i want {{ array[2][1] }}</p>
</div>

其中MyController引用一个AngularJS控制器（基本上是一个简单的javascript对象，它定义了一个定义数组的$ scope。

此时，您不再需要更新HTML。每当你的javascript做类似数组[2] [0] =＆＃39; foo＆＃39; HTML会自动实时更新。

Answer 4

使用以下代码动态创建p标记并将其附加到容器div

中

HTML：

 <div id="container">
   <p>In here i want Test1</p>
</div>

JS：

    var array = [['first1','first2'],['second1','second2'],['third1','third2'],['fourth1','fourth2'],['fifth1','fifth2']];

   //If needed for loop can start here
    var para = document.createElement("p");
    para.innerHTML = 'In here i want ' + array[2][0];
    document.getElementById('container').appendChild(para);

DEMO

如何在.html段落中显示.js文件中的数组元素

4 个答案:

更新