How to get child element by ID in JavaScript?
If jQuery is okay, you can use find(). It's basically equivalent to the way you are doing it right now.
$('#note').find('#textid');
You can also use jQuery selectors to basically achieve the same thing:
$('#note #textid');
Using these methods to get something that already has an ID is kind of strange, but I'm supplying these assuming it's not really how you plan on using it.
On a side note, you should know ID's should be unique in your webpage. If you plan on having multiple elements with the same "ID" consider using a specific class name.
Update 2020.03.10
It's a breeze to use native JS for this:
document.querySelector('#note #textid');
If you want to first find #note
then #textid
you have to check the first querySelector result. If it fails to match, chaining is no longer possible :(
var parent = document.querySelector('#note');var child = parent ? parent.querySelector('#textid') : null;
Here is a pure JavaScript solution (without jQuery)
var _Utils = function (){ this.findChildById = function (element, childID, isSearchInnerDescendant) // isSearchInnerDescendant <= true for search in inner childern { var retElement = null; var lstChildren = isSearchInnerDescendant ? Utils.getAllDescendant(element) : element.childNodes; for (var i = 0; i < lstChildren.length; i++) { if (lstChildren[i].id == childID) { retElement = lstChildren[i]; break; } } return retElement; } this.getAllDescendant = function (element, lstChildrenNodes) { lstChildrenNodes = lstChildrenNodes ? lstChildrenNodes : []; var lstChildren = element.childNodes; for (var i = 0; i < lstChildren.length; i++) { if (lstChildren[i].nodeType == 1) // 1 is 'ELEMENT_NODE' { lstChildrenNodes.push(lstChildren[i]); lstChildrenNodes = Utils.getAllDescendant(lstChildren[i], lstChildrenNodes); } } return lstChildrenNodes; } }var Utils = new _Utils;
Example of use:
var myDiv = document.createElement("div");myDiv.innerHTML = "<table id='tableToolbar'>" + "<tr>" + "<td>" + "<div id='divIdToSearch'>" + "</div>" + "</td>" + "</tr>" + "</table>";var divToSearch = Utils.findChildById(myDiv, "divIdToSearch", true);
(Dwell in atom)<div id="note"> <textarea id="textid" class="textclass">Text</textarea></div><script type="text/javascript"> var note = document.getElementById('textid').value; alert(note);</script>