var div = document.getElementById("preview");
var hr = document.createElement('hr');
div.appendChild(hr);
var h1 = document.createElement('h1');
var p = document.createElement('p');
p.appendChild(document.createTextNode(document.forms['new'].topic_body.value));
div.appendChild(p);
динамический js
на форме есть textarea с каким-то текстом. в тексте есть в том числе и html-теги. с помощью вот таких конструкций:
я планирую сделать что-то вроде предпросмотра сообщения. подскажите, как сделать так, чтобы теги работали в созданном элементе, а не показывались текстом?
Код:
я планирую сделать что-то вроде предпросмотра сообщения. подскажите, как сделать так, чтобы теги работали в созданном элементе, а не показывались текстом?
В предпоследней строчке надо так:
Код:
p.innerHTML = document.forms['new'].topic_body.value;
а зачем var h1 = document.createElement('h1'); ???
лучше объект для предпросмотра предусмотреть заранее (display:none), при необходимости заливать в него контент (пост выше) и отображать (display:block)
лучше объект для предпросмотра предусмотреть заранее (display:none), при необходимости заливать в него контент (пост выше) и отображать (display:block)
html теги будут отображаться пока они НЕ имеют значение через амперсант, в противном случае, оно будет видно как разметка...
Проверьте, нету ли, где-то замены типа htmlspecialchars();
Проверьте, нету ли, где-то замены типа htmlspecialchars();
Я бы решил задачу так:
[html]
<div id="preview" style="display:none">
<div id="titlepreview"></div>
<div id="textpreview"></div>
</div>
[/html]
Ну а жаваскрипт так:
[html]
<script language="javascript">
function preview() {
document.getElementById("titlepreview").innerHTML=document.getElementById("titlefield").value;
document.getElementById("textpreview").innerHTML=document.getElementById("textareaname").value;
document.getElementById("preview").style.display="block";
}
</script>
[/html]
Зачем перестраивать DOM создавая новые элементы ???
Проверил то что накалякал... Отлично работает.. Самому понравилось...
Код работающего примера:
[html]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Test</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
body,td,th {
font-family: Tahoma;
font-size: 14px;
color: #333333;
}
#preview { border: solid 1px #000000; background: #FF33CC; }
-->
</style></head>
<body>
<script language="javascript">
function preview() {
document.getElementById("titlepreview").innerHTML="<strong>"+document.getElementById("titlefield").value+"</strong>";
document.getElementById("textpreview").innerHTML=document.getElementById("textareaname").value;
document.getElementById("preview").style.display="block";
}
</script>
<div id="preview" style="display:none">
<div id="titlepreview"></div>
<div id="textpreview"></div>
</div>
<input type="text" name="titlefield" id="titlefield"><br>
<textarea id="textareaname"></textarea><br>
<a href="java script:preview();"> preview </a>
</body>
</html>
[/html]
[html]
<div id="preview" style="display:none">
<div id="titlepreview"></div>
<div id="textpreview"></div>
</div>
[/html]
Ну а жаваскрипт так:
[html]
<script language="javascript">
function preview() {
document.getElementById("titlepreview").innerHTML=document.getElementById("titlefield").value;
document.getElementById("textpreview").innerHTML=document.getElementById("textareaname").value;
document.getElementById("preview").style.display="block";
}
</script>
[/html]
Зачем перестраивать DOM создавая новые элементы ???
Проверил то что накалякал... Отлично работает.. Самому понравилось...
Код работающего примера:
[html]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Test</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
body,td,th {
font-family: Tahoma;
font-size: 14px;
color: #333333;
}
#preview { border: solid 1px #000000; background: #FF33CC; }
-->
</style></head>
<body>
<script language="javascript">
function preview() {
document.getElementById("titlepreview").innerHTML="<strong>"+document.getElementById("titlefield").value+"</strong>";
document.getElementById("textpreview").innerHTML=document.getElementById("textareaname").value;
document.getElementById("preview").style.display="block";
}
</script>
<div id="preview" style="display:none">
<div id="titlepreview"></div>
<div id="textpreview"></div>
</div>
<input type="text" name="titlefield" id="titlefield"><br>
<textarea id="textareaname"></textarea><br>
<a href="java script:preview();"> preview </a>
</body>
</html>
[/html]
Цитата: Zerstoren
Проверьте, нету ли, где-то замены типа htmlspecialchars();
здесь чистый js ..... htmlspecialchars() и в помине нет!!!
для обработки тегов:
- как текст используем textNode,
- как тегов - innerHTML
ps для предварительного резервирования места под previw можно использовать стиль visibility:hidden и visibility:visible