I have this HTML:
<ul id="ulref">
<li>Joe</li>
<li>Fred</li>
<li>Steve</li>
</ul>
and this JS:
ipDOM=document.getElementById("ulref");
x = document.createElement('LI');
y = document.createTextNode("hello");
z = x.appendChild(y);
ipDOM.appendChild(z);
So, the "hello" should be a child TextNode of the new LI, I am thinking, but instead both the LI and TextNode both appear as direct children (siblings) of the parent UL instead. However, if I alter the JS to:
ipDOM=document.getElementById("ulref");
x = document.createElement('LI');
y = document.createTextNode("hello");
ipDOM.appendChild(x).appendChild(y);
and miss out the z stage, the LI is a child of the UL and the Textnode a child of the LI, as I want.
Why doesn't the first way work as I expected? I am constructing the LI and child TextNode beforehand and then putting that pairing into ipDOM, aren't I?
Node.appendChild returns the child that was appended to the node.
So after you append the text node to the li you append it to the ul(removing it from the li)
ipDOM=document.getElementById("ulref");
x = document.createElement('LI');
y = document.createTextNode("hello");
x.appendChild(y); // append the text node to the li
ipDOM.appendChild(x); //append the li to the ul
Related
I created an unordered list of elements and I'm trying to add a new element using DOM manipulation.
var newEl = document.create Element('li');
var newText = document.createTextNode('Hawaii');
var newEl = newEl.appendChild(newText);
document.getElementsByTagName('ul')[0].appendChild(newEl);
The element was added to the ul element but it was not added as an li element, so my new text doesn't have any bulleting.
This line
var newEl = newEl.appendChild(newText);
Change to
newEl.appendChild(newText);
When you reassign it its not the li anymore (this is not JQ)
.appendChild returns the appended element. In this case your newEl will be a text node after this assignment.
var newEl = newEl.appendChild(newText);
You should remove the assignment and it is fine.
avoid the reassignment to newEl.
var newEl = document.createElement('LI');
var newText = document.createTextNode('Hawaii');
newEl.appendChild(newText);
document.getElementsByTagName('ul')[0].appendChild(newEl);
You can try this.
Set an id to your ul element and append your new li in ul tag
var node = document.createElement("li");
var textnode = document.createTextNode("Hawaii");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
<ul id="myList">
<li>Item 1</li>
<li>Itm 2</li>
</ul>
So, if we're going to append a LI to UL we should do this:
var list = document.createElement('li');
var ulist = document.createElement('ul');
ulist.appendChild(list);
what if I create a span, should I do this?
var list = document.createElement('li');
var ulist = document.createElement('ul);
var span = document.createElement('span');
span.appendChild(ulist);
ulist.appendChild(list);
That's the sort of thing you'd do, yes (other than the typo — missing closing '), except span elements cannot contain ul elements. The content model of span is phrasing content, but ul can only be used where flow content is expected.
You are missing a quote after ul, but your code is correct.
In your latter code, you are appending a <li> to a <ul> and this same <ul> to a <span>. You may want to append all this to the body to make them appear. See example below:
const list = document.createElement('li');
const ulist = document.createElement('ul');
const span = document.createElement('span');
span.appendChild(ulist);
ulist.appendChild(list);
document.body.appendChild(span);
I have below code:
<ul id='someId'>
<li class='someClass'>
</li>
</ul>
I want to set focus on first li element within ul based on some condition.
My first attempt is like this:
var ul = document.getElementById('someId');
var child = ul.childNodes[0];
child.focus();
My second attempt is like this :
var y = document.getElementsByClassName('someClass');
var aNode = y[0];
aNode.focus();
But none of the above works
Any ideas?
The problem is that you can't focus a non input element without setting tabIndex.
<li tabIndex="-1">...</li>
You can Try this fiddle: jsfiddle
An 'li' can't have focus, however an 'input' can, so you write yourself the following script:
function installLI(obj){
var ul = document.createElement('ul');
obj.appendChild(ul);
var li = document.createElement('li');
var txt = document.createElement('input');
li.appendChild(txt);
ul.appendChild(li);
txt.focus();
li.removeChild(txt);
}
Where 'obj' is the object (like an editable div) that you're appending your list to.
Newbie question - Is this code eloquent enough to create four list items? or Should I be using documentFragment instead? The code seems to work fine - JsFiddle.
Created list and li variables
var list = document.getElementById("myList");
var li = null;
Created x number of list elements and companion text nodes
for(var i=1; i<=4; i++){
var li = document.createElement("li");
li.appendChild(document.createTextNode("Number " + i));
Add li to list
list.appendChild(li);
}
Based entirely on the JSFiddle demo you've provided: No. What you currently have is semantically incorrect. You're currently appending your li to the body, not the ul element:
<ul></ul>
<li>Number 1</li>
Change:
document.body.appendChild(li);
To:
list.appendChild(li);
JSFiddle demo.
As for the code you've provided in the question, you also need to change it so that your li elements get appended to your ul element. You also need to change your class into an ID, as getElementById("myList") pulls an element with an ID of "myList", whereas your current ul has no such ID.
Actually there is an error, because you're adding the lis to the body instead of the ul
also the markup is not well created, change
<ul class="myList"></ul>
with
<ul id="myList"></ul>
To use an id and then:
var list = document.getElementById("myList");
var li = null;
for(var i=1; i<=4; i++){
var li = document.createElement("li");
li.appendChild(document.createTextNode("Number " + i));
//document.body.appendChild(li); **error here**
list.appendChild(li); //fix
}
I want to add a new child node, after a specified node, as the third child node.
<ul id="menu">
<li>one</li>
<li>tow</li>
<li>three</li>
<li>four</li>
</ul>
<script>
var li = document.createElement("li");
document.getElementById("menu").appendChild(li);
var sometext = document.createTextNode("third one");
li.appendChild(sometext);
</script>
Use insertBefore if you want to add a node anywhere before the end of its container.
parentElement.insertBefore(newNode, currentThirdNode);
keep in mind that there is a difference in childNodes, namely siblings and ElementSiblings. a textNode is a Node, but not an Element. so if you want to insert an element into the the DOM, use nextElementSibling | previousElementSibling and appendChild | insertBefore and the parent's children attribute that only contains Elements like this:
function insertAsThird( element, parent ){
if ( parent.children.length > 2 ){
parent.insertBefore(element, parent.children[2]);
}
else parent.appendChild(element);
}
and use it like this:
insertAsThird( yourThirdElement, document.getElementById("your target parent"));
if you want to to work on childNodes, not Elements, just change the parent.children parts to parent.childNodes
I think you should append the textNode before adding the new element like this:
<script>
var li = document.createElement("LI");
var sometext = document.createTextNode("third one");
li.appendChild(sometext);
var menu = document.getElementById("menu");
var third = parent.getElementsByTagName("LI")[2];
menu.insertBefore(li, third);
</script>
I Hope this works for you..
javascript (without jQuery):
var newLi = document.createElement("li");
newLi.innerHTML ="new el 3"
var menu = document.getElementById("menu");
var el3 = menu.getElementsByTagName("li")[2];
menu.insertBefore(newLi, el3);
or with jQuery:
$('#menu').children().eq(1).append('<li>new</li>');