This question already has answers here:
Use jQuery to change an HTML tag?
(11 answers)
Closed 6 years ago.
I have this HTML structure:
<div>something</div>
<p>this is a paragraph</p>
Now I want to replace that <p> with <span>. Something like this;
<div>something</div>
<span>this is a span</span>
I want something like this:
$("div").siblings("p"). /* replace with "<span>this is a span</span>" */
Note: There isn't any wrapper around that <p>. So I cannot use .html().
Well, doing that is possible?
Considering given html, you can do it this way:
$("div").next("p").replaceWith('<span>This is a span</span>');
You can use this:
$('p').replaceWith(function(){
return $("<span />", {html: $(this).html()});
});
See fiddle: http://jsfiddle.net/DIRTY_SMITH/k2swf/592/
The jQuery .replaceWith() method removes content from the DOM and inserts new content in its place with a single call. Consider this DOM structure:
<div class="container">
<div class="inner first">Hello</div>
<div class="inner second">And</div>
<div class="inner third">Goodbye</div>
</div>
The second inner <div> could be replaced with the specified HTML:
$( "div.second" ).replaceWith( "<h2>New heading</h2>" );
This results in the structure:
<div class="container">
<div class="inner first">Hello</div>
<h2>New heading</h2>
<div class="inner third">Goodbye</div>
</div>
See http://api.jquery.com/replacewith/
Related
This question already has answers here:
jquery not working to change inner html?
(4 answers)
Closed 7 years ago.
I know similar questions have been asked before here and here. But those don't exactly resemble my situation becase they are trying to change the value of an input box while I am trying to update the HTML of a div element. My issue is that I am calling a JS function right at the top of my HTML page and the function is meant to update the innerHTML of one of the div elements on the page. And for some reason this isn't working. According to an answer to this question, I understand that this could be because I am attempting to access the div even before the page has fully loaded. To resolve this, I tried calling the function from the subject div's onload() event. However, even this refuses to work.
function wotd() {
$('#wotd').HTML("<strong>test</strong>");
alert($('#wotd').text());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
//wotd();
</script>
<div class="col col-md-4">
<!-- WOTD panel -->
<div class="panel panel-default panel-box card-effect">
<div class="panel-heading panel-title">Word of the Day</div>
<div id="wotd" class="panel-body panel-text" onload="wotd();">
Word of the day not currently available.
</div>
</div>
</div>
innerHTML is javasript property. You should use html() in jquery to replace the content of element. And also div does not have onload event. You should do it on document ready or body load like following.
function wotd() {
$('#wotd').html("<strong>test</strong>");
alert($('#wotd').text());
}
wotd();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col col-md-4">
<div class="panel panel-default panel-box card-effect">
<div class="panel-heading panel-title">Word of the Day</div>
<div id="wotd" class="panel-body panel-text" onload="wotd();">
Word of the day not currently available.
</div>
</div>
</div>
This question already has answers here:
How to add a list item to an existing unordered list
(14 answers)
Closed 7 years ago.
I've got 3 nested divs.
<div id="wrapper">
<div id="innerWrapper">
<div id="inner"></div>
</div>
</div>
I need to add html via jQuery./ So I use
$('#wrapper').html('<img src="profile.png"/>');
But when I do that the innerWrapper and inner divs disappears. How can I add <img src="profile.png"/> instead of replacing the divs inside wrapper?
you need to use .appand() instead of .html(), .html() will remove the previous elements.
$('#wrapper').append('<img src="profile.png"/>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">wrapper
<div id="innerWrapper">innerWrapper
<div id="inner"></div>inner
</div>
</div>
Use append() instead of html()
$('#wrapper').append('<img src="profile.png" titile="image"/>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
<div id="innerWrapper">innerwrapper
<div id="inner">inner</div>
</div>
</div>
Use append instead of html
$('#wrapper').append('<img src="profile.png"/>');
I have question that I feel should be simple but I am having issues getting the result I need. I can not change the HTML. Any help would be great!
I have a set up like this.
<div class="container">
<div class='mydiv'>this is text1</div>
</div>
<div class="container">
<div class='mydiv'>this is text2</div>
</div>
I am trying to get the text from each of those divs, set it to a var that I can then use to add a data attribute to the above it.
var DivText = $('mydiv').text();
$('.myAtag').attr('data', 'DivTest');
The problem I run into this that the data attribute is then filled with the text from both divs.
<div class="container">
<div class='mydiv'>this is text1</div>
</div>
<div class="container">
<div class='mydiv'>this is text2</div>
</div>
What can I use/how can I modifiy my jquery to achieve this outcome?
<div class="container">
<div class='mydiv'>this is text1</div>
</div>
<div class="container">
<div class='mydiv'>this is text2</div>
</div>
Use a callback to set each data attribute differently
$('.myAtag').attr('data-text', function() {
return $(this).next('.mydiv').text();
});
FIDDLE
It's usually a good idea to use a key, as in data-whatever
You could also use data(), but that sets the data internally in jQuery and does not add an attribute
How do I move the contents of a div to the contents of another div?
I want to move .sidebar from .post to .carousel. How to do it by using javascript?
I want to go from this:
<div class="container">
<div class="carousel">
<div class="row">
<div class="post">
<div class="sidebar"></div>
</div>
</div>
</div>
</div>
to this:
<div class="container">
<div class="carousel">
<div class="row">
<div class="post"></div>
<div class="sidebar"></div>
</div>
</div>
</div>
document.getElementsByClassName('row')[0].appendChild(document.getElementsByClassName('sidebar')[0]);
I'd suggest, on the off-chance you've more than one element with that class (and assuming that in all instances they should be inserted after their parentNode):
$('.sidebar').each(function(){
$(this).insertAfter(this.parentNode);
});
JS Fiddle demo.
References:
each().
insertAfter().
Assuming you only have only one such occurrence, you can use plain JavaScript:
var sidebar = document.getElementsByClassName('sidebar')[0];
// move after parent node
sidebar.parentNode.parentNode.appendChild(sidebar);
The appendChild() function moves rather than copies existing elements from their previous location in the tree. To perform a copy you would need to clone the respective elements first.
Try to use JQuery Draggable() and Droppable() functions.
See the Demo...
Droppable | JQuery UI
I have HTML like this:
<div>
<div class="a">
content1
</div>
content 2
<div class="a">
<b>content 3</b>
</div>
</div>
and I want to get rid of the div's of class="a" but leave their content. My initial attempt was:
$("div.a").replaceWith($(this).html());
However this is undefined. How would you do this?
try
$("div.a").each(function(){
$(this).replaceWith($(this).html());
});
Replacing elements with their stringified HTML content will nuke any event handlers that might be in place. This won't:
$("div.a").each(function () {
$(this).replaceWith($(this.childNodes));
});
In jQuery you could also use contents and unwrap.
$(".parent").find(".a").contents().unwrap();
<div class="parent">
<div class="a">
content1
</div>
content 2
<div class="a">
<b>content 3</b>
</div>
</div>