Insert html code after element - javascript

I have a html document which looks like this:
...html code...
<ul id="my_ul">
...html code...
Using javascript I want to insert the html code below inside the document, immediately after <ul id="my_ul"> :
<li><span>Some text</span><ul>
So far I have this, but not the expected results. Please, what am I doing wrong?
var para1 = document.createElement("li");
var para2 = document.createElement("span");
var node = document.createTextNode("Some text");
para2.appendChild(node);
var para3 = document.createElement("ul");
var element = document.getElementById("my_ul");
element.appendChild(para1);
element.appendChild(para2);
element.appendChild(para3);

If you want shorter code without creating objects for each html elements just do this:
var element = document.getElementById("my_ul");
var html = '<li><span>Some text</span></li>';
element.innerHTML = html + element.innerHTML;

Like this:
var ul = document.getElementById("my_ul");
var li = document.createElement("li");
var span = document.createElement("span");
var text = document.createTextNode("Some text");
span.appendChild(text);
li.appendChild(span);
ul.appendChild(li);
<ul id="my_ul">
</ul>

Is this what you want to do?
Demo: Fiddle
var para1 = document.createElement("li");
var para2 = document.createElement("span");
var node = document.createTextNode("Some text");
para2.appendChild(node);
para1.appendChild(para2);
element = document.getElementById("my_ul");
element.appendChild(para1);

Your code does this:
element.appendChild(para1);
Make the list item a child of the original list
element.appendChild(para2);
Make the span a child of the original list
element.appendChild(para3);
Make the new list a child of the original list
You need to append each element to the element you want to be its parent instead of appending everything to the original list.
Replace element with the appropriate variable.

$(document).ready(function(){
var para1 = document.createElement("li");
var para2 = document.createElement("span");
var node = document.createTextNode("Some text");
para2.appendChild(node);
var element = document.getElementById("my_ul");
element.appendChild(para1);
para1.appendChild(para2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id="my_ul">
</ul>

var ul = document.getElementById("my_ul");
var li = document.createElement("li");
var span = document.createElement("span");
var textNode = document.createTextNode("Some text");
span.appendChild(textNode);
li.appendChild(span);
ul.appendChild(li);

Related

How do I prevent textContent from overwriting the dynamically created span?

So I'm trying to insert an element into the list but the span keeps getting overwritten by the textcontent that I'm giving to li. This is what the code is supposed to look like:
<li class="togglable"><span class="plus-sgn">+</span> Add Task</li>
This is what I'm getting:
<li class="togglable">Add Task</li>
And here's the code:
const togglable = document.createElement('li');
const span = document.createElement('span');
togglable.className = 'togglable';
span.className = 'plus-sgn';
span.textContent = '+';
togglable.appendChild(span);
togglable.textContent = 'Add Task';
taskList.appendChild(togglable);
To create text node use document.createTextNode:
function add() {
const togglable = document.createElement('li');
togglable.className = 'togglable';
const span = document.createElement('span');
span.className = 'plus-sgn';
span.textContent = '+';
togglable.appendChild(span);
//append text as text node
togglable.appendChild(document.createTextNode('Add Task'));
taskList.appendChild(togglable);
}
add();
add();
add();
<ul id='taskList'>
<li>Abc</li>
</ul>
Maybe you can add it as follow:
const taskList = document.querySelector('ul#taskList');
const togglable = `<li class="togglable"><span class="plus-sgn">+</span> Add Task</li>`;
taskList.innerHTML += togglable;
<ul id="taskList"></ul>

I dont know why this code does not add li element

In console, am getting undefined, but I can't understand.
JS Fiddle
function createItem(element) {
var li = document.createElement('li');
li.innerText = element.value;
var ul = document.getElementById('todo');
ul.appendChild(li);
}
var element = document.getElementById("input")
document.getElementById("submit").onclick = createItem;
console.log(element);
Based on your fiddle, the form is being submitted, in order to prevent that in the below code I have used the event.preventDefault, and then you need to pass the element parameter to the createItem function.
function createItem(element) {
var li=document.createElement('li');
li.innerText=element.value;
var ul=document.getElementById('todo');
ul.appendChild(li);
}
var element = document.getElementById("input");
document.getElementById("submit").onclick=function(e){
event.preventDefault();
createItem(element);
};
try this :)
function createItem(element) {
var li = document.createElement('li');
li.innerText = document.getElementById("input").value;
var ul = document.getElementById('todo');
ul.appendChild(li);
}
var element = document.getElementById("input")
document.getElementById("submit").onclick = createItem;
console.log(element);
<ul id="todo">
</ul>
<input id="input" >? </input>
<button id="submit" />

Taking tab example from fiddle ans use in my project

http://jsfiddle.net/738wtmhs/1/
using above example in fiddle in my own project: for the purpose of this exercise I am using DOM methods to create and append the elements.
function GetFeatureProperties(feature) {
//add header to 1st FirstTabContent
var featureHeader = "<center><b> <FONT COLOR='FF6600'> Feature Properties </FONT> </b> </center> </br>";
var FirstTabContent = document.createElement('div');
FirstTabContent.id = "tabs-1";
FirstTabContent.innerHTML = featureHeader;
//Second Tab
var SecondTabContent = document.createElement('div');
SecondTabContent.id = "tabs-2";
var newImage = document.createElement("img");
newImage.src = "http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg";
newImage.width = "100";
newImage.height = "100";
SecondTabContent.appendChild(newImage);
//add li and ul
var DivHolding2Tabs = document.createElement('div');
DivHolding2Tabs.class = "shoptab";
var header2 = document.createElement('h2');
header2.innerHTML = "Feature";
DivHolding2Tabs.appendChild(header2);
var _ul = document.createElement('ul');
var _anchor1 = document.createElement("a");
_anchor1.href = "#tabs-1";
_anchor1.innerHTML = "Info";
var _li1 = document.createElement('li');
_li1.appendChild(_anchor1);
var _anchor2 = document.createElement("a");
_anchor2.href = "#tabs-2";
_anchor2.innerHTML = "Images";
var _li2 = document.createElement('li');
_li2.appendChild(_anchor2);
_ul.appendChild(_li1);
_ul.appendChild(_li2);
DivHolding2Tabs.appendChild(_ul);
DivHolding2Tabs.appendChild(FirstTabContent);
DivHolding2Tabs.appendChild(SecondTabContent);
var jelm = $(DivHolding2Tabs); //convert to jQuery Element
var htmlElm = jelm[0]; //convert to HTML Element
var OuterDiv = document.createElement('div');
OuterDiv.id = "loc-list";
OuterDiv.appendChild(htmlElm);
return OuterDiv.innerHTML;
}
and this looks like the image seen below....if I click on the link 'image' the page jumps a bit but nothing happens and nothing happens when I press 'info' also I have included the CSS in my project so why arnt the tabs showing and yes I am using jquery ui 1.10.3.custom.js
---------------------------------------------------------------------------------------------
UPDATE
<ul id="list"><li><div><h2>Feature</h2><ul><li>Info</li><li>Images</li></ul><div id="tabs-1"><center><b> <font color="FF6600"> Feature Properties </font> </b> </center> <br></div><div id="tabs-2"><img src="http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg" width="100" height="100"></div></div></li></ul>
Also changed from jquery 1.10.3 custom to jquery 1.11.2.custom with all the downloaded tabs selected
If you look at this fiddle, I managed to make it work.
Here's the possible problems
1) I changed return OuterDiv.innerHTML because I needed the <div id="loc-list"> to be part of the code to initialize it. You gave it an id so my guess is you wanted it to be included but by doing innerHTML, you didn't get it.
2) Once your function returns, you need to initialize the tabs with $('#loc-list').tabs();

How do I add a link to a span of text using JavaScript?

I'm trying to add a link to a span of text using JavaScript below. Please could you help me with this issue.
<div id="features">
<h2>Features</h2>
<div id="emma2011_left">
<h2>Image of the Day</h2>
<div id="dImg">
<div id="dailyimg" class="feature"></div>
<div id="title" class="feature"></div>
<div id="caption" class="feature"></div><br />
<span id="span" class="feature"><a id="pidlink">Link to the object</a></span>
</div>
</div>
<script type="text/javascript">
...
link = document.createElement("a");
link.setAttribute("href", "http://example.com/index.aspx?objectid=" + oTodayImage.pid);
var span = document.createElement("span");
var txt = link.href;
var textNode = document.createTextNode(txt);
span.appendChild(textNode);
</script>
You're missing one step. You added the textnode to the span instead of the link. Then you should've put the link into the span...
var link = document.createElement("a");
link.setAttribute("href", "http://www.google.com");
var span = document.createElement("span");
var txt = link.href;
var textNode = document.createTextNode(txt);
link.appendChild(textNode);
span.appendChild(link);
//example of setting the link into a div on the page...
document.getElementById("div").appendChild(span);
$("<a/>").attr({href:"http://google.com"}).html("google").appendTo("#span");
here is the fiddle http://jsfiddle.net/wYdZb/1/
Instead of creating a text node you can also set the innerHTML of the link. And finally after you create this span you need to append it to some container, for now I have appended it to body.
Working demo
var link = document.createElement("a");
//here in the attribute value I have harded objectid=1 for testing
//replace it by your code to get the id and append it
link.setAttribute("href", "http://abc.org/index.aspx?objectid=1");
link.innerHTML = "Link to the object";
var span = document.createElement("span");
span.appendChild(link);
document.body.appendChild(span);
(function() {
var _a, _div, _span;
_span = document.createElement("span");
_a = document.createElement("a");
_div = (document.getElementsByTagName("div"))[0];
_a.setAttribute("href", "http://abc.org/index.aspx?objectid=");
_a.innerHTML = "Link to the object";
_span.appendChild(_a);
_div.appendChild(_span);
}).call(this);
to get the div element use some method;
must append span to the div element to show all elements.
example:http://jsfiddle.net/bz6bu/
use jquery's append:
var href = "http://abc.org/index.aspx?objectid=" + oTodayImage.pid;
$('#span').append("<a href='" + href + "'>test</a>") ;

How to append checkbox,textnode,in List item

I want to create a list with check box dynamically. For that i created list item, check box,text node dynamically.
My problem is, I want to append checkbox and textnode inside List item. How to do this?
In Script:
var name=x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
var list = document.createElement( "li" );
var cb = document.createElement( "input" );
cb.type = "checkbox";
cb.id = "c1";
cb.value = name;
cb.checked = false;
var text = document.createTextNode( name );
In Body:
<ul id="list" >
</ul>
I want to do like,
<li><input type="checkbox">Tamil</li>
dynamically from javascript.
For that i tried like,
document.getElementById( 'list' ).appendChild(list);
document.getElementById( 'list' ).appendChild(cb);
document.getElementById( 'list' ).appendChild(text);
But it is not appended in li.
How to append these correctly?
You have to create a checkbox dynamically, create a list item (<li>) dynamically, append the checkbox to the <li> and the <li> to the UL
Something Like:
var name = "Test"; //or whatever you want, from another textbox for instance
//Create a new <li> dynamically
var newLi = document.createElement('li');
//Create checkbox dynamically
var checkBox = cb = document.createElement( "input" );
cb.type = "checkbox";
cb.id = "c1";
cb.value = name;
cb.checked = false;
//Append the checkbox to the li
newLi.appendChild(cb);
//Create the text node after the the checkbox
var text = document.createTextNode(name);
//Append the text node to the <li>
newLi.appendChild(text);
//Append the <li> to the <ul>
var ul = document.getElementById("test");
ul.appendChild(newLi);
You started correct, then forgot to create a new <li>
var name=x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
var list = document.createElement( "li" );
var cb = document.createElement( "input" );
cb.type = "checkbox";
cb.id = "c1";
cb.value = name;
cb.checked = false;
// then
list.appendChild(cb);
list.innerHTML+=name;//or if you want,create the textnode 'text' and appendChild again
var lists=document.getElementById('list');
lists.appendChild(list);
I would recommend using jQuery or another similar library. This will help to ensure cross browser compatibilty, and simplify your coding. With jQuery you can do it like this...
// create something, and appendTo something else
$('<li />').appendTo('body')
// select something, and append something else to it
$('li').append( $('<input />').attr({type:'checkbox'}) )

Categories

Resources