Develop Reference

How do I insert a div into another div with plain Javascript(no JQuery or other library)?

How do I insert an HTML div into another div using plain JavaScript? I have found examples of how to do this with jQuery, but I have not found out how to do it with plain JavaScript. The platform I am developing for is limited to plain JavaScript.
I would like to create a grid that has a column and row count that depends on an XML file. I wanted to create a div for each category, and for each piece of content in that category I wanted to add a div. I have been able to create a single div using the following:
document.createElement("img");
Thank you for your help.

If you want it to be added at the bottom of an existing element, you want to use appendChild().
Start by setting the new element to a temporary variable:
var newDiv = document.createElement("div");
Then make any updates to the new element (e.g., add a class, set the id attribute, etc.) and append it to your target element:
document.getElementById.("TARGET_ID").appendChild(newDiv);
If there is other content in the target div already, and you want to place the new element in a specific location other than the end, you can identify the appropriate child element of the target div and use insertBefore() instead.
Lots of information on this can be found here: https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild

Mouseover event on colored with textrange object fragment of text

I want to ask question is it something possible with text range or
other approach. I have a text. For example like this:
<div id="test">abcdefghij</div>
I use text range to highlight fragment of text with yellow color.
(I use example posted into SO). It is possible to add event listener
for mouser over on highlighted text? I want to do something when user
mouseover on 'cdefg'. Here is working jsfiddle.
http://jsfiddle.net/8mdX4/673/
I would appreciate any ideas and recommendations.
Best regards.
Edit:
I want to share the approach that I have usied after the topic.
I'm using focusNode property of selection because commonAncestorContainer
get container of all nodes - not that node currently selected.
Here is demo:
http://jsfiddle.net/zono/Q3ptC/2/
Mouseover on yellow text displaing tooltip (content of title property).

You are using document.execCommand a lot in your code to style elements, this will most likely create a <span> but that's up to the browser. When doing so, each browser will create elements in your target text as it sees fit. To my knowledge, there is no event management command available when using execCommand, so using this technique will make specific event assignments difficult to these elements.
If I were to write your code from scratch, I would use an approach with window.getSelection and create the elements myself, so that I could add the events as I see fit.
Another alternative is just to add window.getSelection() once you know that execCommand has created an element, find the selection's parent, and add the event to the parent node. Like this:
/*At a point where I know a selection is made*/
var sel = window.getSelection();
if (sel.rangeCount) {
parent = sel.getRangeAt(0).commonAncestorContainer
if (parent.nodeType != 1) {
parent = parent.parentNode
}
parent.onclick = function() {
alert("lookie lookie");
}
}
Your code updated with my example:
http://jsfiddle.net/8mdX4/680/

Disable all Radcomboboxes inside a div

I have several telerik radcomboboxes inside a div with various id's. I want to find all of them and disable them without using those id's like say finding the tag name using javascript.
Please help

Each RadControl renders a specific CSS class identifying the type of the control on the control container element. Additionally the JS object is an expando of the container element - control.
So, you can use this: $('.common-container-class-name .RadComboBox').each(function() { this.control.disable(); });

Not sure what a Rad Combo Box is but it seems like different types of input / text elements so try:
$('.someContainerDiv input').attr('disabled','disabled');
Change input for whatever the element is, like the <textarea> tag.

Textarea - how to highlight keystrings with javascript?

I am looking for a javascript that can help me to change the color of a text inside the textarea tag. For example, to have a variable in the javascript:
var a = '<div class="carleft"><p class="coto1">';
now, the javascript should make the text that is inside the variable, to be displayed as bold with red color in the textarea.

See this previous question/answer: jQuery wrap selected text in a textarea

Inner HTML of the textarea element you cannot change the styles/colors of the partial words or characters.
You should use or some other element to implement this.
You can consider the
contenteditable="true" attribute for this purpose.
By using this attribute you can dynamically edit any html element. Which was styled before.

A textarea does not support different styles or colors in the text. You can use contenteditable="true", but that will probably give the user more freedom than you want. I think a better option would be to use a library like CodeMirror or MDK-Editor.

set cursor on a div element?

How do I set the cursor on a div-element in javascript?
I have a form(div-element not input) with a textstring attached on it. I want the textstring removed and the cursor set at the beginning of the element onclick.
I have removed the content in the div-element with onclick event with: divElement.innerHTML = '';
Now I want the cursor to be set?

If you mean the mouse pointer, use the CSS cursor style like this:
#mydiv {
cursor: help;
}
There are a whole load of standard options you can use. You can also define a graphic to use as the pointer (though this has cross-browser compatibility issues).
See this page on Quirksmode for more info.
Similarly, if you want to do it dynamically in Javascript, then just set the object's style:
document.getElementById('mydiv').style.cursor = 'help';

If by 'cursor', you mean the text cursor (aka the caret), I presume what you're really asking is how to make a div into an editable content box.
What you need is to set the contentEditable attribute on your div.
If you want it editable from the start, just include it in your HTML code:
<div contentEditable="true">....</div>
If you want to switch it on/off, you can set it in javascript:
mydiv.contentEditable="true"
However, the only time I can think of when it's better to use contentEditable rather than a textarea is if you're writing a WYSIWYG HTML editor.
Most of the rest of the time I would say it's probably preferable to use a <textarea>. You can style it to look like the rest of your page, and you can make it readonly or disabled when you don't want it changed. But it is much easier to work with in a form and in Javascript. The problem with using a div is that it can contain other html tags, which may affect how it works, and will likely open you up to security problems if you make it directly editable.

divElement.style.cursor = 'whatever';
If you want to move the cursor to be over the divElement, then you can't.