I've been at this for a few hours now and am about to start ripping hair out. Basically what I need to do is get the first element that appears in the body and then insert another element before it.
I've tried the following to get the first element with no success (undefined or null)
window.document.body.firstChild
document.getElementsByTagName("body").firstChild
document.getElementsByTagName("body")[0].firstChild
window.document.documentElement.childNodes[1].childNodes[0]
And a whole slew of mixed and matched attempts of the previous snippets. I've also tried just getting the body then appendChild() with no success either.
Any help here is appreciated. Thanks in advance.
Yes, document.body.firstChild is correct. It's likely that you are overlooking the fact that insertBefore is a method of the parent element, and it takes the new element before the existing one. For example:
var addedElement = document.createElement('p');
addedElement.appendChild(document.createTextNode('Hello, world!'));
var body = document.body;
body.insertBefore(addedElement, body.firstChild);
You want something like this:
var first = document.body.children[0];
var beforeEle = document.createElement("div");
beforeEle.innerHTML = "I'm the first element in the body!";
document.body.insertBefore(beforeEle, first);
The most elegant solution to prepend an element to the body I could up with is a one-liner:
document.body.insertBefore(element, dom.document.body.firstChild)
Related
I have a bug in my code and i try to remove it using jquery.
Some code:
<div id="content">
s
<div class="breadcrumb">
<h1>Test and etc</h1> etc etc....
I want to use jquery to remove the s (if exist...in some cases not)
I've tried
var cont = $('#content').html();
$('#content').html(cont.replace('/s\s(.*)/','$1'));
Seams that the code above is not working...some sugestions ?
Don't use a regex to remove a textnode by running a replace on the HTML, target the textnode directly
var content = document.getElementById('content'),
child = content.firstChild;
if (child.nodeType === 3) { // if textNode
content.removeChild(child);
}
FIDDLE
You do need to call the code when the DOM is ready. And remove the quotes.
$(document).ready(function(){
var cont = $('#content').html();
$('#content').html(cont.replace(/s\s(.*)/,'$1'));
});
Fiddle : http://jsfiddle.net/anj1x7xe/
I don't understand, why won't you remove it directly from the HTML source?
Is the code automatically generated (aka you didn't manually write that 's' there)? Because if it is, I strongly suggest you correct the bug itself. What you're trying to do is covering up a bug, not fixing it. It's good practice to get to the source of a bug and fix it.
Alas, if you really want to do this: You need to specify when your script is called. Most likely, you want it put into the $(document).ready() event.
$(document).ready(function(){
var cont = $('#content').html();
$('#content').html(cont.replace('/s\s(.*)/','$1'));
});
I'm trying to move a link around but when I try to include it within a string it doesn't work. If I remove the string it does though. Why is this happening and how do I fix it?
$(document).ready(function(){
var link = $('a');
//Remove the '<div>'s and it works...
$('div').after('<div>'+link+'</div>');
});
See pen for an example: http://cdpn.io/AKnsL
Thanks.
ED: I probably should of noted that this is a simplified version of what I am trying to do, I'm trying to rebuild a menu (don't ask why...) and I have each link assigned to a variable which is then added in place to a rather long string of divs and such, which is all then added in "after" another div. I only mention in case it changes the way this could be done, and I should mention I'm no JS pro :)
Thanks#2!
The issue is because a jQuery selector, such as $('a') returns an object, and appending a string and an object results in what you've seen.
If you want to move the link to a different element in the DOM, use append():
var link = $('a');
$('div').append(link);
$("a") is actually an object, not a string. If you use $("div").after(link), jQuery will work out that you actually want to append the DOM element.
The problem comes in when you do '<div>' + link + '</div>', where JavaScript is creating the string before jQuery gets involved. this is where [object Object] comes from - this is JavaScript's way of creating a sensible String value for an object. What's being evaluated is $("div").after("<div>[object Object]</div>");
You can get around this by first creating your new div, appending the a to that, then appending your new div to the original.
$(document).ready(function() {
var link = $("a"),
new_div = $("<div />").append(link);
$("div").after(new_div);
});
You could use:
$('div').after('<div/>',{html:link});
Try:
div.innerHTML=""+$('a').attr("href").toString()+"";
or:
var str="";
str+=""+$('a').attr("href").toString()+""; // str will contain links href in it
That will append text to div as a string with its href as text to be appended.
I'm trying to set some text into h1 tag on my website (WordPress Site). I've tested my code in the footer and in the header and it is the last thing to run on the webpage before it is fully loaded.
<script>
function setTitle() {
alert('ok');
var a = document.getElementsByTagName("h1");
a.innerHTML = "yourTextHere";
}
window.onload = setTitle;
</script>
Is anyone able to point out what is wrong with my code or is it something else conflicting with it in WordPress.
Thanks, Luke.
getElementsByTagName returns an HTMLCollection(an array-like object).
Use
var a = document.getElementsByTagName("h1")[0];
to get the first element of the array.
Try this:
Don't use getElementsByTagName(). Instead use getElementsByID and give some ID to your h1 tag where you want to set.
And then Set it like
var a = document.getElementsByID("h1");
a.innerHTML = "yourTextHere";
-
Thanks
So, related to an earlier question, but forgive me for my naive javascript ways. Basically I now want to automatically bring a text input into focus when it is added to the DOM. Part of me thinks that I might be trying to add focus to the object before it exists, but I'm not quite sure how I would go about fixing it. Right now this is my relevant code:
var searchWrapper = document.createElement("div");
searchWrapper.id = "search-wrapper";
this.parentNode.replaceChild(searchWrapper, this);
document.getElementById("search-wrapper").focus();
But it's not quite working. Should I be setting focus as a callback on replaceChild, or is there some other way to do this?
Try the following:
Live Demo
var searchOrig = document.getElementById("search-wrapper");
var searchWrapper = document.createElement("div");
searchWrapper.id = "search-wrapper";
searchWrapper.setAttribute('tabindex', '0');
searchOrig.parentElement.replaceChild(searchWrapper, searchOrig);
document.getElementById("search-wrapper").focus();
I have a function that appends a div to another div.
Something like:
var div = ...some html
$("#mydiv").append(div);
However I want to do some stuff to the div I just added. Currently I want to hide a sub part of the new div, and add a object as data. Something like
var div = ...some html
$("#mydiv").append(div);
$(my new div).find(".subDiv").hide();
$(my new div).data('user',object);
But how should I get the the new div I created? Is there a way to create it and then preform these actions, and then append it? Or should I append it and then retrieve it and modify it?
Efficiency is important as this will be iterated for search results...
Thanks!
I used this as my solution thanks to Tricker:
var div = ...a lagre piece of html;
var newDiv = $(div);
newDiv.find("[show='contractor']").hide();
newDiv.data('user', userObject);
$(appendDiv).append(newDiv);
Thanks!
The way u want is like this:
var new_obj = $('<div class="subDiv"></div>');
$("#my_div").append(new_obj);
//You dont have to find the subdiv because the object "new_obj" is your subDiv
new_obj.hide();
new_obj.data('user',object);
Does .append() not return the new item?
var myNewDiv= $("#mydiv").append(div);
since it will always be the last child div, I believe you can access it via $("#myDiv div:last-child")