I have a question. I have a work this morning but i don't know how to do it.
My work here (html):
<div class="demo">
<p>this is demo text</p>
</div>
Here is my JS:
var tempdata = $(".demo").text();
var replacedata = tempdata.replace("text","<span>1234</span>");
Look everything ok. But result is: this is demo <span>1234</span>. This isn't my result I want. How to make in this string become a HTMLelement by using replace method?
When assigning the value back, use .html() instead of .text() so it won't encode it, like this:
var tempdata = $(".demo").text();
var replacedata = tempdata.replace("text","<span>1234</span>");
$(".demo").html(replacedata);
You can see a demo here
Also, you can pass a method to .html() if you're doing this to many elements, like this:
$(".demo").html(function(i, h) {
return h.replace("text","<span>1234</span>");
});
Note this uses .html() as the source as well, but makes no difference for the example code.
You can see a demo of that here
document.getElementById('demo').firstElementChild.innerHTML =
document.getElementById('demo').firstElementChild.innerHTML.replace(/text/, "<span>1234</span>");
Related
I have the following line of code:
var code = document.querySelectorAll('article.shop-the-look')[0];
This code stores some markup that I want to insert after a given selector.
What I am looking for is more or less the equivalent to the jQuery insertAfter function, but I need it to be Vanilla JS.
Need to use insertBefore. Take a look at accepted answer to: How to insert an element after another element in JavaScript without using a library?
var code = document.querySelectorAll('article.shop-the-look')[0];
var after = document.querySelectorAll('article.after')[0];
after.parentNode.insertBefore(code, after.nextSibling);
<div>
<article class="shop-the-look">Shop the look</article>
<article class="after">After article, should be "Shop the look"</article>
</div>
I have div:
<div id="socialUserList">
//some content here, htmlTags, text, etc.
</div>
Now, I want everything inside of that div to be wiped out. I am trying this:
$("#socialUserList").innerHTML = '';
But for some reason it doesn't want to work. Why?
The normal JavaScript method:
document.getElementById('socialUserList').innerHTML = '';
In jQuery:
$('#socialUserList').html('');
Pure JavaScript and jQuery go hand in hand, like so:
From pure JavaScript to jQuery:
var socialUserList = document.getElementById('socialUserList');
console.log($(socialUserList).html());
From jQuery to pure JavaScript:
var socialUserList = $('#socialUserList');
console.log(socialUserList[0].innerHTML);
Have you tried:
jQuery('#socialUserList').empty();
Note: You may have also tried this:
jQuery('#socialUserList')[0].innerHTML = '';
Using the [0] will access the DOM object of the first matching element.
I would like to split some content from an "a" html tag. I was starting over with jquery. My code is like this but it is not working:
$("a.uribb").each(function() {
var id = $(this).attr("href").replace("http://dereferer.org/?", "");
$(this).append(+id+);
});
And the HTML tag is this:
<a href="http://dereferer.org/?http://example.com/" target="_blank" class="uribb">
http://example.com/
</a>
I wanted to split out the http://dereferer.org/? part and leave the other there. How could I do this?
Try to use .text() instead of .append() if you want to replace the content. Also, there is no need for the + before and after the id.
You could try this instead:
var id = $(this).attr("href").replace("http://dereferer.org/?", "");
$(this).text(id);
Update
Reading through the question again, I'm not sure if you want to replace the content of the a-tag or the the value of the href. In case of the latter, try this:
var id = $(this).attr("href").replace("http://dereferer.org/?", "");
$(this).attr("href", id);
Notice
Since jQuery 1.6, it is preferred to use .prop() instead of .attr().
How about that?
$("a.uribb").attr("href", function(i, val) {
return val.substring(val.indexOf("?") + 1);
});
DEMO: http://jsfiddle.net/zQdL4/
It's interesting but for your markup the following code should also work :)
$("a.uribb").attr("href", function() {
return $.trim(this.innerHTML);
});
Right, so what you want is this.
<a href="http://example.com/">...
Try this.
$("a.uribb").each(function() {
var indirect_url = $(this).prop("href");
var direct_url = indirect_url.replace("http://dereferer.org/?", "")
$(this).prop('href', direct_url);
});
You could of course do this in fewer lines, but this way it's clear what's going on. Specifically, replace() does not modify the string it operates on.
I try to get the outer HTML in two different ways, based on this question. Unfortunately, none of them is giving the expected result:
HTML:
<div id='my_div'>Hello</div>
JS:
$(function() {
document.write('[' + $('#my_div').clone().wrapAll("<div />").parent().get(0).innerHTML + ']<br />');
document.write('[' + (new XMLSerializer().serializeToString(document.getElementById('my_div'))) + ']');
});
The output is:
[
Hello
]
[
Hello
]
I expect the following result: <div id='my_div'>Hello</div>
Live example here
What am I doing wrong ?
First, your first example works fine. Take a look at your output in Firebug. Note, that since your output is HTML it is rendered as HTML. Note that there are newlines before and after the HELLO............... because the HELLOs are inside DIVs!
Take a look:
Second w/ jQuery, you could also use the method in my answer to the question you linked to:
var outerHTML = $('<div>').append( $("#my_div").clone() ).html();
jsFiddle example
This appends a clone of the element in question to a DIV jQuery object and gets the inner HTML of the DIV jQuery object.... which is the outerHTML of the element in question.
The general form of the outerHTML of an element is:
$('<div>').append( $(ElementSelector).clone() ).html();
where ElementSelector is the jQuery selector of the element whose outerHTML you want.
Note: The above adds no new elements to the DOM. $('<div>')...... is never added to the DOM. It remains merely jQuery object independent of the DOM.
Here is a function used in the lib pure.js to get the outerHTML:
function outerHTML(node){
return node.outerHTML || new XMLSerializer().serializeToString(node);
}
And to use it the DOM way:
var html = outerHTML(document.getElementById('my_div'));
UPDATE With DEMO
$(function() {
var html = $('<div>').append($('#my_div').clone()).html();
$('body').html( htmlspecialchars( '[' + html + ']' ) );
});
htmlspecialchars function
try this:
var result = $('<div></div>').append($('#my_div').clone()).html();
alert(result);
You can use get to pull out native DOM element and then use the outerHTML as :
var html = $('#my_div').get(0).outerHTML;
or
var html = $('#my_div')[0].outerHTML;
this sounds really simple and stupid..but I'm having a hard time removing the content before each dash from each H4 element on my page....i've been trying to do this with Jquery/Javascript.. Any insight?
Here's a sample of my HTML code:
<h4>California-Medical Research</h4>
<h4>Florida-Industrial</h4>
<h4>Atlanta-Computers</h4>
I'm trying to have my code cycle through each occurance of <h4> and remove everything before the dash...so the desired result will look like this:
Medical Research
Industrial
Computers
Thanks!
Assuming your layout's consistent with dashes you could do this:
$("h4").text(function(i, t) { return t.substring(t.indexOf('-') + 1); });
Since jQuery 1.4+ .text() takes a function, making this very clean. You can give it a try here.
Try this :
$.each($('h4'), function(i){
var content = $(this).html();
content = content.split('-')[1];
$(this).html(content);
});