"replaceWith" not altering contents - javascript

The directive replaceWith as used in the code below only changes the target content once. If I send any other object the alert shows the proper value but not the div.
function identify (thisobj) {
alert(thisobj.value);
$("#test").replaceWith(thisobj.value);
}
The target element is shown below.
<div id="canvas_container">
<div id="test">This is a test</div>
</div>
Various objects are being passed, here, each with a different value. But though the Alert() reflects the proper content, the #Test only allows a one time change and then it retains that value forever.

You are replacing #test with your new element. It won't work again unless the element you replace it with also matches that selector.
From the jQuery docs:
The .replaceWith() method removes content from the DOM and inserts new
content in its place with a single call.
Assuming you want to keep the #test element, you can use the html method to replace the contents of it, rather than the element itself.

.replaceWith() substitutes an entire DOM node; you should be using .html(thisobj.value) or .text(thisobj.value)

You have misunderstood the use of replaceWith: it replaces the element you call it on, so after the first use, there is no element #test anymore.
You want text or maybe html:
$("#test").text(thisobj.value);
If your value contains html, use:
$("#test").html(thisobj.value);

replaceWith removes the #test element and replaces it with what you set (thisobj.value).
To replace an element's content, use .html() (or .text()).
function identify (thisobj) {
alert(thisobj.value);
$("#test").html(thisobj.value);
}

replaceWith will replace the entire element, to replace the content within #test, use:
$("#test").html(thisobj.value);

Have you looked into jQuery's text() function? If not, http://api.jquery.com/text/
It may help with replacing text

Related

Why jQuery html works like replaceWith when using with form?

I have form with id push-message-form and ajax call to server returns new form html to replace with. push-message-form id set on form itself, like:
<form id='push-message-form'>form content</form>
and ajax response html looks same.
From jQuery docs I understood that: html() will replaces the contents of the element, while replaceWith() replaces the actual element.
http://api.jquery.com/html/
http://api.jquery.com/replaceWith/
But I'm using
$('#push-message-form').html('<form id='push-message-form'>content</form>')
and it replaces form itself (whilst it should add another form inside current one).
The question is why html() works as replaceWith() in this case?
Update
Some answers suggests use append, sorry if it's not clear. But I don't want to append. I want to replace form with new one returned from server (keeping it's id), and replaceWith() does work just fine.
The question is why html() works too here. Since it should replace only content, but it replaces tag too.
You should be using .append() to add content to the container calling .html() is going to replace whatever is inside that container with the value you enter:
Also you're trying to append the form with the same id so you should use a class or change the id name
This:
$('#push-message-form').append('<form class="push-message-form">content</form>')
Instead of this:
$('#push-message-form').html('<form id='push-message-form'>content</form>')
.html() acutally clears the HTML inside the element & then places your new HTML in it. While you need .append() to actually make you new HTML added in the Current HTML
$('#push-message-form').append('<form id='new-form-id'>content</form>')

How to append to a variable in jquery?

I have the following code:
var golden_site = '<div id="golden_site"></div>';
$('.form_content').append(golden_site);
var lookup = '<input type="text" name="lookup" value="test">';
Why is this not working:
$(golden_site).append(lookup);
But accessing the node by id works:
$('#golden_site').append(lookup);
This $('#golden_site') selects the div with id=golden_site. While this $(golden_site) doesn't select anything.
Taken from here, you have the following ways of selecting an element using jQuery
Selecting Elements by ID
Selecting Elements by Class Name
Selecting Elements by Attribute
Selecting Elements by Compound CSS Selector
Pseudo-Selectors
The way you tried to select your div doesn't follow one of the above ways. Hence you didn't make it. While using the id you made it, since this is included in the above ways.
update
As Guffa pointed out (I didn't now it) in his comment,
The call $(golden_site) doesn't try to use the string as a selector at
all. It will create an elements from the HTML string, and actually
return that element
The code is working fine, but it doesn't do what you think.
The $(golden_site) part will create a new div element from the HTML code in the string. The lookup element will then be appended to that div. As the div is an element that you just created, it's not in the page and the lookup element that you appended to it isn't in the page either.
If you create the div element first and then append that to the page, instead of using a string in the append, then you have a reference to the div element:
var golden_site = '<div id="golden_site"></div>';
var element = $(golden_site);
$('.form_content').append(element);
Now you can append things to it:
element.append(lookup);
Because when you say
$(golden_site).append(lookup);
Actually you mean:
'<div id="golden_site"></div>'
In plain words, it's just a string, not a jQuery object that can be appended to. golden_site is just a string.
The reason is because the $() is in fact a wrapper of jQuery over the document.querySelector(). So as expected both methods should behave similar, when you do:
$("#blah").append(x);
Indeed the browser is doing this:
document.querySelector("#blah").appendChild(x);
So both methods should work as they explain here -> How query Selector works
As you can see the variable passed as argument is a string that will be used as a CSS Selector, they explain here -> CSS Selector List
I will add this graphic with some of the most common ways to select elements from the DOM, don't forget the '', courtesy from W3CSchools.

How to insert created object into a div

I created an iframe using jQuery that I want to insert into an existing div element. However, when I use innerHTML to insert it, it shows up as: "[object HTMLIFrameElement]"
What could be the reason for this?
Here is the example: http://jsfiddle.net/MarkKramer/PYX5s/2/
You want to use the appendChild method rather than innerHTML. Change the last line in the JSFiddle from
iframediv.innerHTML = iframe;
to
iframediv.appendChild(iframe);
Edit to actually answer your question:
Your variable iframe is a reference to a DOM element. It's object representation is an <iframe> element while its textual representation is simply [object HTMLIFrameElement].
By using innerHTML you are attempting to insert its textual representation into the DOM. This is just how the method works. You may come across JS code where elements are added to the DOM via innerHTML, but it's always with text, e.g.
element.innerHTML = '<div>some text</div>';
In this case the browser will correctly add a <div> node as a child of element.
For your <iframe> element to be inserted into the DOM using the variable iframe, you must use the appendChild method which will add the IFrame object as a child node to iframediv.
$('#iframecontainer').append(iframe);
instead of
var iframediv = document.getElementById('iframecontainer');
iframediv.innerHTML = iframe;
should fix the problem
var new_iframe = $("<iframe></iframe>");
new_iframe.appendTo($("#div_to_insert_into"));
The idea behind (most) of the posted solutions is that you can work with your iframe and it's container as jQuery objects instead of regular dom elements. A jQuery object is a reference to a div or an iframe that has access to all of jQuery's awesome methods... like .append() and .click().
Generally speaking, jQuery's real purpose is to turn lines of code like
var iframediv = document.getElementById('iframecontainer');
...into ...
var iframediv = $("#iframecontainer");
...which you can then use to do with whatever you please, like
iframediv.appendTo("#anotherDiv");
Good luck.

how do i change contents of a div within a div?

What I am trying to do is change the contents of a div within a div. I can't seem to access it.
dialog is the parent while dialogChange is the child.
When I do:
$("#dialog").text("New Text");
It'll replace everything within the parent, dialog.
But when I do:
$("#dialogChange").text("New Text");
Nothing changes.
So how can I access the child within a parent?
If you do $("#dialog").text("New Text");, this will effectively remove dialogChange, so $("#dialogChange").text("New Text"); won't work.
Instead of using the text method, which replaces the entire contents of the div, you should try some of these methods:
.before()
.after()
.append()
For example, you could use $("#dialogChange").before("New Text") to insert something before that div.
Play around for the exact effect you want, and use the API as a guide:
http://api.jquery.com/
How about something like this:
$('parent').find('child').text('New Text');
Your jQuery looks good. Possibly the problem is in your HTML.
Or by any chance have your replaced the contents of the parent (and therefore deleted the child) before you call the code affecting the child?

How to convert an HTML element to a string, including the opening and closing tags?

Suppose I have the following HTML element:
<span id='kuku' class='lala bubu' value='xyz'>some text</span>
I know that .html() returns the inner part of the element, i.e. some text.
How could I get the whole element as string, containing <span>...</span>?
Most browsers support the element.outerHTML property. You may also want to check out the following Stack Overflow post for an alternative solution (for non IE browsers):
How do I do OuterHTML in firefox?
Try this:
alert($('#kuku').clone().wrapAll("<div/>").parent().html());
clones the element you want
wraps it in a div
selects the parent (the new div)
gets the HTML
You can also do it like this:
alert( $('<div>').append( $("#kuku").clone() ).html() );
This one creates an empty div and appends a copy / clone of the element with id kuku to it. It then returns the innerHTML of that previously empty div, which now has in it precisely the HTML you are after.
Simply get the owner of the span. So use the id of the owner/container of the span and use
document.getElementById("urSpanOwnerID").innerHTML

Categories

Resources