My code is...
How do I get the text in each list item into an array using native javascript?
<ul id="list">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
</ul>
<script type="text/javascript">
var list = document.getElementById('list').childNodes.TextNode;
for(var i=0;i < list.length; i++) {
var arrValue = list[i];
alert(arrValue);
}
</script>
Many thanks.
Unless you want the text-nodes between each <li>
it's not a good idea to use childNodes
. What's wrong with getElementsByTagName('li')
?
var listItems = document.getElementById('list').getElementsByTagName('li'),
myArray = map(listItems, getText);
function map(arrayLike, fn) {
var ret = [], i = -1, len = arrayLike.length;
while (++i < len) ret[i] = fn(arrayLike[i]);
return ret;
}
function getText(node) {
if (node.nodeType === 3) return node.data;
var txt = '';
if (node = node.firstChild) do {
txt += getText(node);
} while (node = node.nextSibling);
return txt;
}
Try this:
var list = document.getElementById('list').childNodes;
var theArray = [];
for(var i=0;i < list.length; i++) {
var arrValue = list[i].innerHTML;
alert(arrValue);
theArray.push(arrValue);
}
var LIs = document.getElementById('list').childNodes;
var list = [];
for( var i = 0; i < LIs.length; ++i )
{
var LI = LIs[i];
list.push(LI.innerText || LI.textContent);
}
And as always, the simpler way using jQuery:
var list = $('#list li').map(function(){ return $(this).text(); });
Just about any Javascript library ( Prototype , jQuery , Closure , ...) will make this easier, but if you want to do it yourself:
You're close, your Javascript should look something like this:
window.onload = onPageLoad; // Or any of several other similar mechanisms
// (you could just run it at the bottom of the page)
function onPageLoad() {
var node, list, arrValue;
list = [];
for (node = document.getElementById('list').firstChild;
node;
node = node.nextSibling) {
if (node.nodeType == 1 && node.tagName == 'LI') {
list.push(node.innerHTML);
}
}
// `list` now contains the HTML of each LI element under the `ul#list` element
}
Explanation:
document.getElementById
, you need to be sure that the DOM is ready for you to do that. It's definitely ready at onload
time, and there are various mechanisms for triggering your code a bit earlier than that if you like (including putting the script right at the end). ul#list
element's first child, then continues as long as there are further siblings. nodeType == 1
) and that its tag name is "LI". I've used innerHTML
to retrieve the content of the LIs because it's widely supported. Alternately, you could use innerText
on IE (and some others) and textContent
on Firefox, but beware that they don't do quite the same thing ( textContent
on Firefox will include the contents of script
tags, for instance, which probably isn't what you want).
var list = document.getElementsByTagName('ul')[0].getElementsByTagName('li');
var theArray = [];
for (var i = 0; i < list.length; i++) {
var arrValue = list[i].innerHTML;
console.log(arrValue);
theArray.push(arrValue);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.