This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Replace Div with another Div
<div id='test'>
<span></span>
<p></p>
<button></button>
<h1></h1>
</div>
My question is , how we can remove the button element and insert someother on the same position in jquery?
Use this:
$('#test button').replaceWith('<span>new</span>')
$('#test button:first').replaceWith('<span>new</span>')
you can usereplaceWith() method:
$('#test button').replaceWith('<p>another element</p>')
You can use the .replaceWith() method to accomplish this. For more.
Solution
$('#test').find('button').replaceWith('<input type="text"/>');
alert($('#test').html());
Related
This question already has answers here:
Can you do an 'AND' on a jQuery selector to target multiple buttons?
(3 answers)
Closed 4 months ago.
I'm a beginner with JavaScript so I'm sure this will be an elementary question.
With this function below, I want it to find the two elements and add them to a header element. Right now, the only thing that is working is the element, the link with the rel:author tag. I'm sure this is probably a syntax thing.
(function($) {
$(document).ready(function() {
$(".single .single-post-module").each(function() {
$(this).find('a[rel="author"]', 'span[class="updated"]').clone().appendTo($(this).find('.post-header h1'));
// ^^^
});
});
})(jQuery)
Edit: I'm using Divi on wordpress and the site is in maintenance mode. That's why didn't show the HTML or give a link.
This could be done with pure Javscript querySelectorAll with an CSS selector that will find both elements.
To clone the element, use cloneNode(true) where the first parameter indicates to clone 'deep'
const header = document.querySelector('.post-header > h1');
const elements = document.querySelectorAll('.single, .single-post-module');
Array.from(elements).forEach(e => header.append(e.cloneNode(true)));
<div class='single'>
<a rel='author'>Link</a>
<span class='updated'>Span</span>
</div>
<div class='single-post-module'>
<a rel='author'>Link</a>
<span class='updated'>Span</span>
</div>
<div class='post-header'>
<h1></h1>
</div>
This question already has answers here:
Remove all child elements of a DOM node in JavaScript
(37 answers)
How do I clear the content of a div using JavaScript? [closed]
(2 answers)
Closed 5 years ago.
I want to remove the everything under the classname: social-share using JavaScript
HTML: This is what it looks like when I grab the code from chrome inspector.
<div class="social-share">
[shareaholic app="share_buttons" id="26444890"]
</div>
HTML: This is what exactly looks like inside the chrome inspector
<div class="social-share">
"
[shareaholic app="share_buttons" id="26444890"]
" == $0
</div>
You can use innerHTML to clear the contents of the element after it has been selected:
// select element with class 'social-share:
var social_share = document.querySelector('.social-share');
// Set it's contents to an empty string
social_share.innerHTML = '';
$('.social-share').empty();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="social-share"> content
<div>content</div>
</div>
Jquery empty() might be help you. It will remove every thing inside social-share class
This question already has answers here:
Get selected element's outer HTML
(30 answers)
Closed 8 years ago.
Hello everyone,
I'm a little bit confused here, trying to store couple of html elements into a variable.
But when I try to print out the content of my variable, some elements are not being displayed. is that some kind of magic :) or what I'm doing wrong exactly?
This is then causing issues in my other functions, which are trying to find certain elements in the variable.
var template = $(" <div class='item'><span id='item_stats_info'> <div id='item_name'> </div> </span> </div>");
console.log(template.html());
Result:
<span id="item_stats_info"> <div id="item_name"> </div> </span>
Could you guys advise me on what's the best way to store html elements in a variable?
Thansk in advance,
Alex
The .html() method of jQuery returns the HTML inside of the element, since you need to get the outer HTML, you can try wrapping it in another div:
var template = $("<div> <div class='item'><span id='item_stats_info'> <div id='item_name'> </div> </span> </div> </div>");
console.log(template.html());
Use this to get the full html, not the inner html....
console.log(template.prop('outerHTML'));
This question already has answers here:
jQuery : remove element except inside element
(4 answers)
Closed 8 years ago.
I have the following scenario: I want to append the input field to a different parent. The code looks like this
<div id="id1">
<div id="id2">
<input type="radio">
</div>
</div>
I want to append the input field to "id1" and delete the "id2". The final result should look like this
<div id="id1">
<input type="radio">
</div>
$('#id2 input').appendTo($('#id1'));
$('#id2').remove();
DEMO
$('#id2 input').appendTo($('#id1'));
$('#id2').remove();
In one line:
$("#id2").find("input").appendTo("#id1").end().end().remove();
Another one line:
$("#id2 input").unwrap("#id2");
DEMO: http://jsfiddle.net/CrmMG/
$('#id1').append($('#id2 input'))
$('#id2').remove();
Live Demo
take your input
var input = $("inputselector");
Put it in desired container
var parentRef = $("inputselector").parent();
$("inputselector").parent().parent().append( $("inputselector"));
Delete parent
parentRef.remove();
$div = $('input:radio').clone();
$('#id2').remove();
$('#id1').append($div);
fiddle
Use jQuery unwrap(). It removes the parent of selector leaving the selected element in it's place
$('#id2 input').unwrap()
API Reference http://api.jquery.com/unwrap/
you can use either of them.
$('#id2 input').appendTo($('#id1'));
$('#id2').remove();
or
$('#id2 input').unwrap();
This question already has answers here:
change html text from link with jquery
(7 answers)
Closed 7 years ago.
I have the following html structure:
<div class="event tiny">
Something
</div>
And I want to replace the text of this link with "Anything" …
When doing this …
$('.event a').replaceWith("Anything");
… the text is replaced but also the link is gone.
When doing this …
$('.event a').text().replaceWith("Anything");
… nothing happens.
Like this, if the new text is all the same.
$('.event a').text("Anything");
jQuery loops over the a elements, and replaces its content with the "Anything" text.
These suggestions, for setting the inner text & URL link within a a href didn't work for me (using JQuery v1.8.3)
Here's what did work though:
HTML
<a id="hrefAnalysisName" ></a>
JavaScript
$("a#hrefAnalysisName").attr("href", "/SomePage/ShowAnalysisDetails.aspx");
$("a#hrefAnalysisName").text("Show analysis");
Hope this helps!
You could also change the link by href if it's related to the URL.
$('a[href="/whatever"]').text("Anything");
You are able to get this result the next ways result will be the same:
HTML
<div class="event tiny">
<a class="html" href="/whatever">Something</a></br>
<a class="text" href="/whatever">Something</a></br>
<a class="replaceWith" href="/whatever">Something</a>
</div>
JS
$('.event a.html').html('Anything-html')
$('.event a.text').text('Anything-text')
$('.event a.replaceWith').replaceWith('<a class="replaceWith" href="/whatever">Anything-replaceWith</a>')