I have the following
$('.toggle_questions').appendTo('#'+sectionId).show();
Which works perfectly to append my div (.toggle_questions). However, I want it to replace rather than add each time.
From my understanding this is done through html() rather than appendTo() ? I have only found examples adding simple <p> codes and not actual <div> 's
I have changed it to this but it won't seem to do anything:
$('#'+sectionId).show().html($('.toggle_questions')).show();
The show() is needed as it is set to hidden to start with.
Where have I gone wrong? Thanks!
I would save the content of $('.toggle_questions') on every occurrence and apply it like this:
var content = $('.toggle_questions').html();
$('#' + sectionId).html(content).show()
It's a much cleaner code and easier to maintain.
Try to pass html string in to .html(),
$('#'+sectionId).html($('.toggle_questions').html()).show();
.html() wont accept jquery object as its parameter.
But appendTo() will move the original object. If you want to do the same thing using .html(), then you have to remove it manually after setting the html string.
Related
I'm trying to move an anchor tag from one element to another. When I do this, the only thing appended is the anchors href, not the element itself. Why is this and how can I fix it?
I need a solution in Javascript only as jQuery isn't being used
Thanks for any help!
Fidde: https://jsfiddle.net/p7g7mkxs/
What I've tried:
<p class="hello">hello</p>
<p class="hello">helloLINK</p>
var hello = document.querySelectorAll('.hello');
hello[0].insertAdjacentHTML('beforeEnd', hello[1].querySelectorAll('a')[0]);
I've also tried using different variations of selecting my elements, like getElementsByTagName or appending it differently with innerHTML - Everything I've tried has given me the same result.
You use insertAdjacentHTML with HTML (a string), not with an actual element. If you pass it an element, the element is converted to string (like String(theElement)). In the case of an HTMLAnchorElement, that means you just get the href. Proof:
console.log(
String(document.querySelector("a"))
);
Hey
To append an element to the end of another element's child list, use appendChild:
var hello = document.querySelectorAll('.hello');
hello[0].appendChild(hello[1].querySelector('a'));
(To insert it elsewhere, use insertBefore. Actually, you can use insertBefore in all cases if you like, just use null as the reference element when adding to the end.)
Also note that when you only want the first match, rather than querySelectorAll(/*...*/)[0], use querySelector(/*...*/), which returns the first match or null.
In addition to what #t-j-crowder said, you can also use outerHTML to accomplish the task:
var hello = document.querySelectorAll('.hello');
hello[0].insertAdjacentHTML('beforeEnd', hello[1].querySelectorAll('a')[0].outerHTML);
I need to change the text in a button but it's not working. This is what I've come up with thus far:
var newElemen = $(<button text='Text changed..'></button>);
document.append$(newElemen);
I've also prepared a jsFiddle example.
Don't spend too many horses on this.
You need to first look at how jQuery's selector works. It works similar to CSS selectors (if you're not familiar with that I suggest you start with something more basic).
If you need a quick review on jQuery syntax. In your example you need to use the element selector $('button') and then you'll want to apply the .text() function to change the text for the button. So if you put it together. You'll want to select the button and then apply the text() function, passing in the string you want to change the text to, to change it's text.
$('button').text('Insert Text Here');
Use .text method using button selector
$("button").text('Text changed..');
$('button').text('new text');
fiddle: http://jsfiddle.net/zLf3k/3/
jQuery selector must be String
created new DOM element when you use html element on jQuery selector
use $(document).append instead of document.append$
$('button').text('some text');
I've got this element that's not precisely defined as a div or anything but just white space popping up inside the html. Can't get to it with jQuery to remove it.
Type of element is highlighted in the screenshot.
Im not expert, but maybe you could use .prev() method.
Something like
$('#main .content').prev();
Pure Javascript to select it:
var textNode = document.getElementById("main").getElementsByClassName("filter-navigation")[0].nextSibling;
and remove it:
textNode.parentElement.removeChild(textNode);
jQuery simplifies the selection a bit, but the removal has to be done the same way since jQuery doesn't like removing text nodes:
var textNode = $("#main").find("filter-navigation")[0].nextSibling;
textNode.parentElement.removeChild(textNode);
The answer is not simply.
jQuery can map objects with structure. It's very hard to catch just whitespaces as DOM elements and remove them.
I cant suggest 2 alternatives:
Use jQuery to get parent tag, extract innerHTML and user regex to remove "extra whitespaces" between tags:
$(document).ready(function(){
var container = $('.product-container');
container.html(container.html().replace(/>\s+</i, '><'))
});
Use css to clean how looks my content inside that tag as suggests thirtydog here
Hope this help!
Jquery
I am trying to change the inner text on multiple td element which I believe should look something like this although this does not appear to be a jquery object when I am debugging (I could be wrong).
What is the correct way this should be done?
$('.leg-number').each(function () {
this.html('foo');
});
Maybe try this instead:
$('.leg-number').html('foo');
which is a shorter and more efficient way to achieve your goal. It is just asking jQuery to set the inner html of every element with class "leg-number" to "foo" without any explicit iteration. Most of the jQuery methods like .html() can work on sets of elements so you don't really need to use .each() for simple cases like this.
Now on why your version didn't work: Using .each() would work if you wrapped this with the jQuery function $() so you could use the jQuery methods on it:
$('.leg-number').each(function () {
$(this).html('foo');
});
The variable this inside of the .each() callback is a DOM element and you need $(this) to convert it into a jQuery object that wraps this element. See the explanation in the answer by epascarello who explained it before I updated my answer.
Read the docs for each(). this is a DOM Html Element node, not a jQuery object reference. You can either convert it back to jQuery or use innerHTML directly.
$(this).html('foo');
or
this.innerHTML = 'foo';
The docs show using $(this) in the examples.
Change:
this.html('foo');
to:
$(this).html('foo');
You're attempting to use a jQuery method on a non-jQuery object. This of course assumes that your table cells have the class .leg-number.
I am trying to change HTML code within an IFrame (it's on the same domain), but for some reason, this line, wont change the html:
$('iframe').contents().find('#weergave_afstand').innerHTML = afstand
the text it should modify is the following:
Afstand traject: <span id="weergave_afstand">200</span> km.
But for some reason, it doesn't.
When I use
$('iframe').contents().find('#weergave_afstand').html()
it reads the value (200) just fine...
What am I doing wrong here?
innerHtml is not a jQuery function, it is an HTMLElement Property.
Usage --> http://www.tizag.com/javascriptT/javascript-innerHTML.php
To write to the inner html using jquery you can use the same html() function which you used for read.
$('iframe').contents().find('#weergave_afstand').html(afstand);
innerHTML is not a jQuery method. You can change the innerHTML property by putting the value in the html() method like this:
$('iframe').contents().find('#weergave_afstand').html("afstand");
Hope that helps!