Question

好的，我有一个JavaScript问题，我不确定如何开始它。我想要做的是基本上创建一个JavaScript，检查页面上所有innerHTML标记的<h2>并将其放在下拉列表中。

这是我到目前为止所做的：

<script type="text/javascript">
function getData() {
    var post = document.getElementsByTagName('h2')[0].innerHTML;
    document.getElementById('result').innerHTML = 'H2 Contents<br>' + post + '<br>';
}
</script>

我还设置了一个JS小提琴，这样你就可以了解它没有做什么，并使你的工作更轻松。这是包含的行看起来像（所有这些都是相同的）：

<center><h2><span>People Nowdays...</span></h2></center>

我尝试将getElementsByTagName从h2更改为span，但仍然无效。最有趣的部分是小提琴作品＆gt; _＆gt; http://jsfiddle.net/eJbf4/

Answer 1

的 jsFiddle Demo 的

如果要显示所有h2标签，您将在循环中迭代元素集并构建如下结果：

var posts = document.getElementsByTagName('h2'); for( var i = 0; i < posts.length; i++ ){ document.getElementById('result').innerHTML += 'H2 Contents<br>' + posts[i].innerHTML + '<br>'; }

此外，您已定义了一个函数，但从不调用它，因此代码永远不会执行。

getData();//execute the function

demo of call

Answer 2

我已经更新了你的小提琴。 http://jsfiddle.net/eJbf4/2/

getData();

function getData() {
    var post = document.getElementsByTagName('h2')[0].innerHTML;

document.getElementById('result').innerHTML = 'H2 Contents<br>' + post + '<br>';
}

你永远不会调用你的getData（）函数......

Answer 3

试试这个：

function getData() {
    var post = document.getElementsByTagName('h2');
    var res = 'H2 Contents<br>';
    for(var i=0; i<post.length; i++) {
        var v = post[i].innerHTML;
        res +=  v + '<br>';
    }
    document.getElementById('result').innerHTML = res;
}
getData();

Demo

Answer 4

循环通过它：

 function getData() {
  var post = document.getElementsByTagName('h2'), h2s = '';
      for(x=0, y = post.length; x < y; x+=1){
       console.log(post[x].innerHTML);
       h2s += post[x].innerHTML + '<br/>';
       }
 document.getElementById('result').innerHTML = 'H2 Contents<br>' + h2s;
     }
     getData();

<强> DEMO

Answer 5

试试这个：http://jsfiddle.net/eJbf4/5/

function createList () {
    var i, length, els = document.querySelectorAll('h2'),
        sel = document.getElementById('mySelect');
    for (i=0, length = els.length; i < length; i++) {
        var op = document.createElement('option');
        op.innerText = op.value = els[i].innerText;
        sel.appendChild(op);
    }
}
createList();

Answer 6

这是一种方法来实现这一点......其他人似乎都在使用createElement调用，但随着时间的推移，这些调用可能会中断...

具体来说，这会创建一个下拉列表（选择列表）：

function getData() {
    // First, get a reference to your h2 tags
    var h2s = document.getElementsByTagName('h2');
    // then a reference to the div you want to put your select list
    var resultDiv = document.getElementById('result');
    // string concatenation is faster than creating nodes individually,
    // so we create a select list with a placeholder here
    var selectList = "<select>{0}</select>";
    var options = "";
    // cycle through your collection of h2 nodes
    for(var iH2 = 0; iH2 < h2s.length; iH2++){
        // get the content from the current h2
        var content = h2s[iH2].innerHTML;
        // add an option node with the content inserted to our options string
        options += "<option>" + content + "</option>";
    }
    // replace the placeholder with the options string
    selectList = selectList.replace("{0}",options);
    // now add the hold select tag to the innerHTML of results
    resultDiv.innerHTML = selectList;
}

getData();

（我的jsFiddle：http://jsfiddle.net/mori57/RNTfA/）

获取<h2>标签的所有innerHTML并将其列出</h2>

6 个答案: