How to get html from node or HTMLElement? [duplicate] - javascript

This question already has answers here:
jQuery, get html of a whole element [duplicate]
(4 answers)
Closed 8 years ago.
I'm trying to convert the pure html of a Node or HTMLElement to string but i can't seem to get the right result as shown in the console. That means just the html element, not it's child elements...
CODE
function eventData(e){
return {
'sender': e.srcElement || e.target,
'event': e || window.event,
};
};
$(document).ready(function(e){
var $elm = $("<input class='test' data-type='text only'/>").attr({'type':'button','value':'Test'});
$elm.appendTo('#target');
$elm.click(function(e) { alert(eventData(e).sender.value); });
$('#asHTML').text($elm[0].toString());
//Console is the best way to display a node object;
//Open your console to see the result;
console.log($elm[0]);
});
I'm just wondering if any one of you has successfully done this!
DEMO: http://jsfiddle.net/0xfwLfwj/1/
EDIT
Updated fiddle with better explanation: http://jsfiddle.net/ttoom9hc/10/

If this is what you want to display -
<input class="test" data-type="text only" type="button" value="Test">
Then this is the piece of code for it -
$('#asHTML').text($elm[0].outerHTML);
Here is a fiddle

have you tried
$elm.html()
That should give you the HTML of that element as a string.
http://api.jquery.com/html/

Related

How Can I Use The HTML Button Element In JavaScript Completely [duplicate]

This question already has answers here:
Why is document.write considered a "bad practice"?
(17 answers)
Closed 1 year ago.
Can You help me find out how to use the html button element in JavaScript because
document.write("<body> <div> </div> </body>")
is not working for buttons or drop down menus so can you help me?
my guess is the
.write
Is the problem because that probably means text and a button is not text.
This is not the most correct way to do this. You must create elements and add them to the DOM tree.
let button = document.createElement('button');
document.body.append(button);
button.onclick = () => {
alert('button clicked');
}
I think you want append(). This example is stolen from this MDN page
let parent = document.createElement("div")
let p = document.createElement("p")
parent.append(p)
console.log(parent.childNodes) // NodeList [ <p> ]

jquery on click not working for dynamically added items [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 4 years ago.
I'm adding some code(!with js code included!) dynamically.
<div class="r"></div>
<script>
//Here is code that dinamiccaly add another div into div.r
//Example:
//<div class="w"><img src="a.png"><div class="i">Some Text</div></div>
$('.r').on('click', $('.w'), function (e) {
console.log($(this).children($('.i')).text());
});
</script>
Problem that this click event works anythere I click in div.w and returns text of ALL div.w combined in one string without spaces (sometext1sometext2).
Sorry if I wrote something wrong. I'm bad in english.
Event delegation is wrong. You are using a jQuery collection
$('.r').on('click', $('.w'), function (e) {
^^^^^^^
where it should be just a selector
$('.r').on('click', '.w', function (e) {
^^^^
The selector has to be of type string. Look at the following:
$('.r').on('click', '.w', function (e) {
from documentation of on

Bind a event on an element [duplicate]

This question already has answers here:
Event handler not working on dynamic content [duplicate]
(2 answers)
Closed 8 years ago.
What is the best way to bind an event on multiple element .
I wrote this code to do that is there is any good way to do that.
$('#GiftPurchase_recipient_first_name,#GiftPurchase_recipient_last_name').bind('blur', function() {
gift_to = $('#GiftPurchase_recipient_first_name').val()+" "+$('#GiftPurchase_recipient_last_name').val();
$("#gift_to").val(gift_to);
});
I have two input box with first name and last name, i wont to display there first anme and last name into a another element
Give the elements a class and add the event to the class.
$('.theclassnamethatalltheelementsshare').bind('blur', function() {
gift_to = $('#GiftPurchase_recipient_first_name').val()+""+$('#GiftPurchase_recipient_last_name').val();
$("#gift_to").val(gift_to);
});
maybe this works
$(document).ready(function(){
$('#GiftPurchase_recipient_first_name,#GiftPurchase_recipient_last_name').bind('blur',function(){
var gift_to = $('#GiftPurchase_recipient_first_name').val()+" "+$('#GiftPurchase_recipient_last_name').val();
$("#gift_to").val(gift_to);
});
});
Fiddle

Searching jQuery variable full of html [duplicate]

This question already has answers here:
parse html string with jquery
(4 answers)
Closed 8 years ago.
This may be a strange question -- Right now I have a variable that is full of HTML, and I want to use jQuery (or JS) to search that varaible for inputs with checkboxes, and return the information.
So:
alert($(this).parent().parent().html())
var thisIsThat = $(this).parent().parent().html();
alert(thisIsThat)
var Awesome = $(thisIsThat).find('input:checked');
And then after I get that variable, after a successful ajax call, I want to change a specific attribute inside of it, like so:
$(Awesome).attr('value', 'false');
Right now, "Awesome" is returning nothing, which then doesn't allow me to change the attribute like I want to. I may be on the wrong direction as well -- any advice appreciated!
Use this
var thisIsThat = $(this).parent().parent();
alert(thisIsThat)
var Awesome = $(thisIsThat).find('input:checked');
In this case thisIsThat is a object and you can find anything using that object
This is an example showing the same basic idea running off of a string which finds the checkbox fine and unchecks it.
<div id="out"></div>​
<script>
var htmlStr = '<div><input type="checkbox" checked="checked"/></div>';
var temp = $(htmlStr);
var cb = temp.find("input:checked");
cb.attr("checked",false);
jQuery("#out").append(cb);
</script>
jsfiddle
The problem I am betting is that you are checking the checkbox manually. It will not update the DOM attribute when you do that.
Here is a basic example to show you the problem.
<div id="one">
<input type="checkbox" />
</div>
<button>Tell</button>​
<script>
function tellMe(){
var myDiv = jQuery("#one");
var html1 = myDiv.html();
console.log(html1);
}
jQuery("button").click(tellMe);
</script>
Take a look this fiddle of the code above.
Open up the console, and click on the button. You will see it unchecked. Check the checbox and click the button again, same html is outputted even though the checkbox is checked.
change
var Awesome = $(thisIsThat).find('input:checked');
to
var Awesome = $(thisIsThat).find('input[type=checked]');
now loop over it
Awesome.each(function(){
if($(this).is(':checked'))
{
$(this).attr('checked',false);
}
});

How to change only text node in element [duplicate]

This question already has answers here:
How can I change an element's text without changing its child elements?
(16 answers)
Closed 1 year ago.
I have next html:
<label for="user_name">
<abbr title="required">*</abbr>
Name
</label>
And I want to change label caption to Title with jquery. So I do
$('label[for=user_name]').html('Title')
And it replaces all inner html (including abbr tag)
So, what's the easiest way to replace only Name?
If you use contents() method it will also return text nodes. Since jQuery doesn't have text node methods, convert last node to a DOM node
$('label[for="user_name"]').contents().last()[0].textContent='Title';
Demo: http://jsfiddle.net/yPAST/1/
Sorry for the late reply... But here is a way to do so using only jQuery:
$('label').contents().last().replaceWith('Title');
It may not be the prettiest way, but this works:
var $label = $('label[for=user_name]');
$label.html($label.html().replace("Name", "Title"));
You can select only the abbr element, store it, and then replace the whole content with the stored element plus the changed caption:
​$('label[for="user_name"]').each(function(){
var a = $(this).children('abbr');
$(this).html(a).append('Title');
});
See this fiddle​
you can use replace accomplish this
var html = $('label[for=user_name]').html().replace('Name','Testing');
$('label[for=user_name]').html(html);
check it : http://jsfiddle.net/DyzMJ/
Evans solution added to jquery fn to make it's use comfortable:
// get/change node content not children
jQuery.fn.content = function( n ){
var o = $(this).clone();
var c = o.children().remove();
if (typeof n === "string" ){
o.html(n);
$(this).html(c).append(n);
}
return o.html();
}
Usage :$('myselector').content('NewContentString');
This is the solution that worked for the most browsers
$('label[for="user_name"]').contents().last()[0].nodeValue = 'Title';
This one came close but gave issues in ie8 since textContent is not supported
$('label[for="user_name"]').contents().last()[0].textContent='Title';
if you are manipulating more than 1 label you can select each label and replace text with jquery:
$('label[for="user_name"]').contents().last().replaceWith("Title");
and for the second label :
$('label[for="user_lastname"]').contents().last().replaceWith("Title2");
and so on ...

Categories