display div tag in javascript

**hemi** · 06-30-2010, 09:49 AM

Hi All,

Can any one tell me how to add a div tag in javascript.

suppose my div tag is like this in normal html file

<div id=showDiv></div>

this div will contain some value iam getting in javascript. Now instead of in html file i want to add this in javascript and still should get the value. Is it possible

**jscheuer1** · 06-30-2010, 01:18 PM

It depends upon when you want to do that. If it's as the document is loading, then you probably want the document.write() method. If it's after the page is loaded, you want to either use the innerHTML property of an existing element or use DOM level 2 methods to create and insert your division. If it's empty to begin with, there's probably no harm in having it already on the page, this will save considerable coding. That way all you need to do is fill it.

But the short answer is:

Code:

var myDiv = document.createElement('div');
myDiv.id = 'showDiv';
document.body.appendChild(myDiv);

That last line can have many variations depending upon just where you want to put the new division.

**hemi** · 06-30-2010, 01:52 PM

thanks for u suggestion,

Actually iam doing a editor program where i can select my text and make it bold,italic,etc., My problem is that when i select something and click on Bold or Italic it is displaying after the textarea. what i need is i want to make that result should come in the textarea only.

I dont want to use Iframe for that.If there is another without using iframe please let me now.

Here is my code

----------------html----------------------
<html>
<head>

<script lang=javascript type=text/javascript src=htmleditor.js>

</script>
</head>
<body>
<input type=button id=btnBold value=B onclick=insertsBoldTag() />
<input type=button id=btnItalic value=I onclick=insertsItalicTag() />
<input type=button id=btnUnderline value=U onclick=insertsUnderlineTag() />
<input type=button id=btnDelete value=Del onclick=insertsDeleteTag() />
<br/>
<textarea id=area name=showDiv cols=35 rows=12>
</textarea>

<div id=showDiv> </div>
</body>
</html>
-----------------------------------

----------JavaScript--------------------------
var area;
var showDiv;
var formattedStr = "";
startPosition = 0;
var endPosition = 0;

window.onload = function()
{
area = document.getElementById("area");
showDiv = document.getElementById("showDiv");
};

function publish()
{

formattedStr = "<pre>"+document.getElementById("area").value+"</pre>";

showDiv.innerHTML = formattedStr;

}

function insertsBoldTag()
{
findPositions();

var text = area.value;
if (startPosition!=endPosition) {
var sbStr = text.substring(startPosition,endPosition);
sbStr = "<b>"+sbStr+"</b>";

fillsFormattedString(text,sbStr);
publish();
}

}

function insertsItalicTag()
{
findPositions();

var text = area.value;
if (startPosition!=endPosition) {
var sbStr = text.substring(startPosition,endPosition);
sbStr = "<i>"+sbStr+"</i>";

fillsFormattedString(text,sbStr);publish();
}
}

function insertsUnderlineTag()
{
findPositions();

var text = area.value;
if (startPosition!=endPosition) {
var sbStr = text.substring(startPosition,endPosition);
sbStr = "<u>"+sbStr+"</u>";

fillsFormattedString(text,sbStr);publish();
}
}

function insertsDeleteTag()
{
findPositions();

var text = area.value;
if (startPosition!=endPosition) {
var sbStr = text.substring(startPosition,endPosition);
sbStr = "<del>"+sbStr+"</del>";

fillsFormattedString(text,sbStr);publish();
}
}

function findPositions()
{
var text = area.value;

if (document.selection) {

var range = document.selection.createRange();
var dpl = range.duplicate();
if (range.text.length > 0) {
dpl.moveToElementText(area);
dpl.setEndPoint("EndToEnd", range);
startPosition = dpl.text.length-range.text.length;
endPosition = startPosition + range.text.length;
}
}
else {

startPosition = area.selectionStart;
endPosition = area.selectionEnd;
}
}

function fillsFormattedString(text, selectedText)
{

var str1 = text.substring(0,startPosition);
var str2 = text.substring(startPosition,endPosition);
var str3 = text.substring(endPosition,text.length);

str2 = selectedText;

formattedStr = str1+str2+str3;
area.value = formattedStr;

}
---------

**jscheuer1** · 06-30-2010, 03:47 PM

So what's the problem? Do you need to create a division, or populate it, or do you need to insert tags around selected text in a textarea?

It sounds like what you are asking is the latter, how to insert tags around selected text in a textarea.

If so, see:

http://www.dynamicdrive.com/forums/s...3&postcount=44

**hemi** · 07-01-2010, 05:16 AM

what exactly i need is when i type something in textarea and select that and click on bold it is displaying in the textarea itself for example it is displaying like "my <b>name is Agent</b>" and below the textarea, it is displaying the correct format like"my name is Agent" (name is Agent will be in bold).This should happen in textarea itsel not bellow the textarea box.

**jscheuer1** · 07-02-2010, 03:58 AM

Sorry, you are still being unclear. You cannot have bold text in the textarea as your post seems to imply. I don't think you really meant that though.

Try this out:

http://home.comcast.net/~jscheuer1/s..._text_plus.htm

**hemi** · 07-02-2010, 09:20 AM

ok, once see this editor

http://ckeditor.com/demo

here in this demo if u select some text and click on bold or italic or anything else u can see the changes there only but not bellow the textarea. They are using Iframe and i dont want to use it. same thing i want with my code . Is there any way otherthan IFRAME.

**jscheuer1** · 07-02-2010, 12:31 PM

My code uses no iframe.

**hemi** · 07-02-2010, 02:23 PM

well in ur code you are having two boxes one for selecting text and the other one for getting the output. What i want is instead of having two boxes why not our output displays in the first box itself. I want all that should happen in this same textarea itself

**jscheuer1** · 07-02-2010, 03:04 PM

It cannot. You cannot have like - bold text or an image in a textarea. You can technically only have text. Browsers allow source code though, but it is a violation of standards. A textarea will always display as source code text, not as HTML.

You can swap the two. You could have both the textarea and the division position absolute within a relatively positioned container. When the user toggles between source and display modes you could toggle the visibility property of each, making one visible and the other hidden. Something like that must be happening on the editor you linked to.

The reason the editor you linked to that does this sort of toggling uses an iframe, at least one reason, is that styles on the editor page might conflict with those on the edited page and visa versa. With an iframe, they are two separate pages, so no style conflicts can arise.

Why are you so dead set against an iframe?

Thread: display div tag in javascript

Thread Tools

Search Thread

display div tag in javascript

Bookmarks

Bookmarks

Posting Permissions