jQuery to plain javascript

Question

I need to change this bit of jQuery..

$(function() {

$("#breadcrump").append("<div id='oldsite'>Can't find what you're looking for? Try our old website: <a href='http://www.brooksbarn.co.uk'>Old Website (brooksbarn.co.uk)</a>  or<a href='mailto:[email protected]?Subject=Brooksbarn.com Part Enquiry' target='_top'>E-Mail</a></div>");

});

Into regular javascript, I've looked into many ways, but my lack of js knowledge seems to be my stumbling block.

Here is what I've come up with so far:

document.body.onload = addElement;

function addElement () { 
// create a new div element 
// and give it some content 
var newDiv = document.createElement("oldsite"); 
var newContent = document.createTextNode("Can't find what you're looking for? Try our old     website: <a href='http://www.brooksbarn.co.uk'>Old Website (brooksbarn.co.uk)</a>  or<a     href='mailto:[email protected]?Subject=Brooksbarn.com Part Enquiry' target='_top'>E-Mail</a>"); 
newDiv.appendChild(newContent); //add the text node to the newly created div. 
// add the newly created element and its content into the DOM 
var currentDiv = document.getElementById("breadcrump"); 
document.body.insertBefore(newDiv, currentDiv); 
}

textNode is text, not html, hence why the link is not a link. — epascarello
– epascarello, Commented Nov 13, 2014 at 13:28
document.createElement("oldsite") isn't a div it's <oldsite></oldsite> — charlietfl
– charlietfl, Commented Nov 13, 2014 at 13:30

Maxouhell · Accepted Answer · 2014-11-13 13:27:53Z

1

Why do you don't do that :

document.getElementById("breadcrump").innerHTML += "<div id='oldsite'>Can't find what you're looking for? Try our old website: <a href='http://www.brooksbarn.co.uk'>Old Website (brooksbarn.co.uk)</a>  or<a href='mailto:[email protected]?Subject=Brooksbarn.com Part Enquiry' target='_top'>E-Mail</a></div>";

?

answered Nov 13, 2014 at 13:27

Maxouhell

7969 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

epascarello Over a year ago

And you just wiped out any events that may have been attached to the content in breadcrump.

epascarello · Accepted Answer · 2014-11-13 13:41:17Z

0

There are a couple of things you can do, easiest would be to just set the string as innerHTML

(function(){

    function addElem () {
        var newDiv = document.createElement("div");  //create div
        newDiv.id = "oldsite";  //sets id
        newDiv.innerHTML = "Can't find what you're looking for? Try our old     website: <a href='http://www.brooksbarn.co.uk'>Old Website (brooksbarn.co.uk)</a>  or<a     href='mailto:[email protected]?Subject=Brooksbarn.com Part Enquiry' target='_top'>E-Mail</a>";  //add html to new element
        document.getElementById("breadcrump").appendChild(newDiv);  //add it to the page
    }

    if (el.addEventListener) {
        window.addEventListener('load', addElem , false); 
    } else if (el.attachEvent)  {
        el.attachEvent('onload', addElem );
    }

}());

edited Nov 13, 2014 at 13:41

answered Nov 13, 2014 at 13:30

epascarello

208k20 gold badges206 silver badges246 bronze badges

2 Comments

Brooks Over a year ago

Thanks for your comment, for some odd reason the jQuery I have provided works correctly, but your code does not. Could something else be causing errors?

epascarello Over a year ago

because I did not add the document.ready... stackoverflow.com/questions/799981/…

Michael · Accepted Answer · 2014-11-13 13:30:04Z

0

I think you should add these:

1 You are creating a div, not a oldsite tag

var newDiv = document.createElement("div");

2 You need to set the id

newDiv.id = "oldsite";

3 You are originally appending it:

document.body.insertBefore(newDiv, currentDiv.nextSibling);

http://jsfiddle.net/gf6gna1g/

answered Nov 13, 2014 at 13:30

Michael

3,3345 gold badges27 silver badges37 bronze badges

Collectives™ on Stack Overflow

jQuery to plain javascript

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related