{"id":551,"date":"2006-06-14T19:45:07","date_gmt":"2006-06-14T17:45:07","guid":{"rendered":"http:\/\/frenchfragfactory.net\/ozh\/archives\/2006\/06\/14\/javascript-quick-reference-for-newbies-inserting-content\/"},"modified":"2007-05-08T15:45:58","modified_gmt":"2007-05-08T13:45:58","slug":"javascript-quick-reference-for-newbies-inserting-content","status":"publish","type":"post","link":"https:\/\/planetozh.com\/blog\/2006\/06\/javascript-quick-reference-for-newbies-inserting-content\/","title":{"rendered":"Javascript quick reference for newbies : inserting content"},"content":{"rendered":"

Situation : You want to insert some simple content into a DOM element. Since you happen to be a javascript n00b like me who always forget how to do it, and you don't want to use a 60 kb prototype.js<\/em> for your 10 javascript lines project, you thought it would be useful to write down once for all how this is done. Right ? Hmmkey.
\n<\/p>\n

HTML start :<\/h2>\n

Say the HTML we have is something like the following :<\/p>\n

<div>hello <span id="myspan">mister<\/span> Ozh<\/div><\/code><\/pre><\/div>\n
Create new content with Javascript :<\/h2>\n
You will either create a new HTML element (a DIV, a SPAN etc) and its content (innerHTML), or raw text :<\/p>\n
var target = document.getElementById('myspan');\r\n\r\n\/\/ method 1 : create an HTML element\r\nvar content = document.createElement('span');\r\ncontent.innerHTML = 'I am an <em>inserted<\/em> SPAN';\r\n\r\n\/\/ method 2 : create raw text with no markup\r\nvar newtext = document.createTextNode('INSERTED');<\/code><\/pre><\/div>\n
Insert Before :<\/h2>\n
target.parentNode.insertBefore(content, target);<\/code><\/pre><\/div>\n
HTML result :<\/p>\n
hello INSERTED<span id="myspan">mister<\/span> Ozh<\/code><\/pre><\/div>\n
Insert at the Top :<\/h2>\n
target.insertBefore(content, target.firstChild);<\/code><\/pre><\/div>\n
HTML result :<\/p>\n
hello <span id="myspan">INSERTEDmister<\/span> Ozh<\/code><\/pre><\/div>\n
Insert at the Bottom :<\/h2>\n
target.appendChild(content);<\/code><\/pre><\/div>\n
HTML result :<\/p>\n
hello <span id="myspan">misterINSERTED<\/span> Ozh<\/code><\/pre><\/div>\n
Insert After :<\/h2>\n
target.parentNode.insertBefore(content, target.nextSibling);<\/code><\/pre><\/div>\n
HTML result :<\/p>\n
hello <span id="myspan">mister<\/span>INSERTED Ozh<\/code><\/pre><\/div>\n
prototype functions<\/h2>\n
For reference, using javascript framework prototype<\/a>, these 4 content insertion can be achieved with the following :<\/p>\n
new Insertion.Before(target, content);\r\nnew Insertion.Top(target, content);\r\nnew Insertion.Bottom(target, content);\r\nnew Insertion.After(target, content);<\/code><\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"
Situation : You want to insert some simple content into a DOM element. Since you happen to be a javascript n00b like me who always forget how to do it, and you don't want to use a 60 kb prototype.js for your 10 javascript lines project, you thought it would be useful to write down once for all how this\u2026<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[2,7,202],"class_list":["post-551","post","type-post","status-publish","format-standard","hentry","tag-code","tag-javascript","tag-prototype"],"_links":{"self":[{"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/posts\/551","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/comments?post=551"}],"version-history":[{"count":0,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/posts\/551\/revisions"}],"wp:attachment":[{"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/media?parent=551"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/categories?post=551"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/tags?post=551"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}