I would like to insert an hr element in a different child div (2 child divs within a parent div), as per the set-up below. The insertbefore method works fine for an element within the same div but not for elements in the other child div (see code below). Is there a different method I can use to achieve this or do I want the impossible?
<body>
<div id="whole section">
<div id="group_a">
<h3 id="event_1">Heading 1</h3>
<p> some text </p>
**// I would like to insert an hr element here**
<h3 id="event_2">Heading 2</h3>
<p> more text </p>
</div>
<div id="group_b">
**// I can only insert code here though**
<script type="text/javascript">
function add_hr(){
var new_hr = document.createElement('hr');
var reference = document.getElementById('event_2');
document.body.insertBefore(new_hr, reference);
}
window.onload = function(){add_hr();};
</script>
</div>
</div>
</body>
insertBefore requires that the reference element be a direct child of the element on which you call it. Your line
document.body.insertBefore(new_hr, reference);
...tells the browser to insert new_hr before the reference element directly contained by document.body. But document.body doesn't directly contain the reference element, it's inside a div. So you get an error, because the reference element can't be found directly inside the element you're inserting into.
You can fix that by using the reference element's parent:
reference.parentNode.insertBefore(new_hr, reference);
Live Example | Source
Related
I have a portion of a child HTML file called up inside a div using an id tag in the parent. I want to create a button to clean out the child content and return to the parent inside that div. What would the JS code be for this, for a graphic?
suppose your html is:
<div class='parent'>
<div class='innerParent'>
<input type='button' id='removeChildContent'>
<div class='child'>
</div>
</div>
</div>
so, using jQuery, you can clean the child content as below:
$(function()
{
$('#removeChildContent').click(function()
{
$(this).siblings().not(':first').remove();//removes the child elements of inner parent, except this button
})
})
I have this script:
<script>
var prop = document.getElementById('div1').firstChild.getAttribute("id");
function aler()
{
alert(prop);
}
</script>
and out of the script tag:
<div id="div1">some content</div>
<button onclick="aler()"></button>
Can someone explain to me why when I click the button it says: "undefined"
Correction:
in the div i drag a picture:
<img id="C" src="C.png" draggable="true" ondragstart="drag(event)" width="91px" height="91px">
for example.
The first child of div1 is a text node. It has no id.
EDIT
As to your correction, if the resulting HTML looks anything like this, then the first child is still a text node:
<div id="div1">
<img id="C" etc.>
</div>
because text includes tabs, spaces, and returns. I'm not sure how drag/drop affects that.
In the DOM, there are various kinds of "nodes." Your <div id="div1">some content</div> markup defines two nodes: An Element that's a div, and its first (and only) child, a Text node containing the text you have within the div. The Text node has no id. The div element has an id, but the text node does not.
document.getElementById('div1').firstChild is the text some content. When you call getAttribute("id") on that, since plain text had no id, you're going to get undefined.
Say I have the following:
<div id="content">content</div>
And I want to insert some stuff before it ** (notice the unclosed div)**:
$("#content").before("<div>pre-pre-content</div><div>pre-content ");
And some then some more after ** (notice I am now closing the div)**:
$("#content").after(" post-content</div><div>post-post-content</div>");
My desired output is:
<div>pre-pre content</div>
<div>
pre-content <div id="content">content</div> post-content
</div>
<div>post-post content</div>
Instead, what I get is:
<div>pre-pre content</div>
<div>pre-content</div>
<div id="content">content</div>
<div>post-content</div>
<div>post-post content</div>
Because jQuery is automatically "correcting" the unclosed tags.
fiddle
Is there a way to use .wrap() to add different content before and after an element without automatically closing tags?
Note, I cannot do the following because of an unrelated restriction:
$("#content").html("<div>Content before " + $("#content).html() + " Content after</div>")
You can't insert partial or unclosed tags. Inserting elements in the DOM must insert only whole elements.
Your choices are:
Extract the element you want to be wrapped in your new element, insert the new container object and then put your original element into the container.
Manipulate the HTML of a parent directly (generally not recommended).
Use the jQuery .wrap() method which does the option in #1 for you. See here for more info on jQuery's .wrap().
Here is my problem:
<html>
<div id="parentdiv">
some parent value
<div id="childdiv">some child value</div>
</div>
</html>
parent div --> parent div content --> child div --> child div content --> end child div --> end parent div
I need to acquire only parent div value, without child div value. How can I do that in Javascript?
try this:
alert($('#parentdiv').clone().children().remove().end().text());
If you have control over the HTML - just wrap the value in a <p> tag (as it should be) and then access it like so..
HTML
<html>
<div id="parentdiv">
<p>some parent value</p>
<div id="childdiv">some child value</div>
</div>
</html>
jQuery
$('#parentdiv p').text();
If there are other <p> elements in the parentdiv then use a class.
just wrap it inside a span tag and get the inneHTML of that tag
This works:
var $parent = $('#parentdiv').clone();
$parent.find('#childdiv').remove();
var parentvalue = $parent.text();
Try it in this JsFiddle
I have a div in a HTML file
"<div id="abc" hidden="hidden">
<div id="statIndicator">
<span id="imgInd" class="status-indicator-border">
<img src="../../LibSrc/SharedResources/IMG/loading-trace.gif" />
</span><span id="messageIndicator">Updating Plots...</span>
</div>
</div>"
I insert the statIndicator div in another div using append.
so that div becomes
<div id="parentDiv">
<div id="statIndicator">
<span id="imgInd" class="status-indicator-border">
<img src="../../LibSrc/SharedResources/IMG/loading-trace.gif" />
</span><span id="messageIndicator">Updating Plots...</span>
</div>
</div>
On refresh I write $('#parentDiv').empty() it deletes whatever is inside the 'parentDiv'.
But when I try to append statIndicator using $('#statIndicator'), it return "[]", though I have the 'statIndicator' div in Html.
Is there a way in which I can get the 'statIndicator' div?
No. $.empty() deletes the contents, so your "statIndicator" div no longer exists at all.
Just remove it from "parentDiv" before you call $.empty(). Either store it in a variable or put it back where it started, in "abc".
I think jquery.append() moves the selected elements without making a copy. So you can explicitly create a copy using the .clone() method and append it's result. Something like:
$('#abc #statIndicator').clone().appendTo('#parentDiv');
This is creating a copy and then appending it at the new location.
Once you do this there will be two divs with the same id, so it will be a good idea to always reference the statIndicator's parent container in your selectors.
You can use .detach() function if you want only parentDiv to be removed