We Keep Coding

JS: Moving an anchor with insertAdjacentHTML only appends the href, not the element

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);

Get multiple <p> elements with Jquery and add them to a div

I'm trying to extract multiple <p></p> elements and append them to a single div. I can only seem to get the first paragraph. Any idea?
I'm using this code:
$("#result").append($wikiDOM.find('p').html());

You don't need to use .html()
$("#result").append($wikiDOM.find('p')); //Remove .html()
When you use .html() it will give you the HTML of first element only, not all of the paragraphs in the jQuery set. But note that using append on an element that's already in the document will move it from its old location to its new one (whereas appending the HTML of an element just copies it).

You don't need to get the html() from the selected elements - you can append them directly:
$("#result").append($wikiDOM.find('p'));

Detect dynamic div elements with getElementById()

So when the code ...
document.getElementById('classhere').childNodes
... runs, I manage to get all elements with that ID EXCEPT for elements that have been dynamically created by a 'createDiv()' function:
function createDiv()
{
var divTag = document.createElement("div");
divTag.id = "classhere" + num;
...
I would like to get all div elements with that Id, even dynamically created div elements. Does anyone have a solution? Thanks!

Try out jQuery
jQuery Wildcard Selector
http://www.emadibrahim.com/2009/07/25/jquery-wildcard-selector/

So when the code ...
document.getElementById('classhere').childNodes
... runs, I manage to get all elements with that ID
getElementById looks up a single element by ID, not by class. That line as quoted will look up an element with the id value "classhere" and return a NodeList of its immediate child nodes (elements, text nodes, etc.). If you create further elements and either don't add them to the DOM, or add them elsewhere (not as immediate children of the "classhere" element), they won't be on the NodeList. It has nothing to do with whether they were created during the main HTML parsing or after-the-fact with JavaScript.
I would like to get all div elements with that Id...
There can be only one element with a given ID.
If you're trying to find all elements whose id starts with "classname", you can use an "attribute starts with selector":
var divs = $("div[id^='classname']");
...gives you a jQuery object containing all of the matching divs as of the time you executed the statement (unlike a NodeList, it's not live; if you change things you'll have to run the selector again).

jQuery: Get one of a set of selected elements

There are several elements that are selected by $(".foo"). $(".foo").text() returns the text of each element concatenated together. I just want the text of one element. What is the best way to do this?
$(".foo")[0].text() fails.

You want to use .eq(0), like this:
$(".foo").eq(0).text()
When you do $(".foo")[0] or $(".foo").get(0) you're getting the DOM Element, not the jQuery object, .eq() will get the jQuery object, which has the .text() method.

Normally using the # selector syntax selects one element by id attribute value. Do you have more than one element with the same id attribute value? If so, then you need to correct your HTML. id attribute values should be unique within a document.

The items in the jQuery array always return the dom elements (not the jQuery wrapped elements). You could do something like:
$($("#foo")[0]).text()

Remove element by class using parent()

I am making changes to a jQuery validator, when there is an error it inserts a div to the parent element. I am trying to remove an the inserted div with by the specific class name from the parent.
$(element).parent().remove('.removeThis');
I thought the above code would work but it does not remove the the div.

.remove([selector]) will remove an element with the optional matching selector from the current list of elements in the jQuery object. It does not look through the children of the wrapped elements. Try either of these alternatives:
$(element).siblings('.removeThis').remove();
$(element).siblings().remove('.removeThis');

Try
$(element).parent().find('.removeThis').remove()