Question

通过JavaScript添加标签

<p>ABCDEFG</p>
通过JavaScript在字母C处添加font标签,效果:
<p>AB<font size="3" color="red">C</font>DEFG</p>
如mzhmark所讲,因为事先不知道,所以才问的.
其实我想做的是
将从数据库获得的数据在<p></p>文中进行检索,检索到的文字变红.
所以事先无法添加标签.
提分,再次求解

Answer 1

JavaScript可以通过CreateElement方法动态创建标签，具体示例如下：

示例1：定义方法创建一个label标签 

 
var createLabel = function(id, name, value) { 
    //新建lable标签
    var label_var = document.createElement("label"); 
    //新建id属性
    var label_id = document.createAttribute("id"); 
    label_id.nodeValue = id; 
    //新建文本节点
    var label_text = document.createTextNode(value); 
    //为label标签添加属性和文本
    label_var.setAttributeNode(label_id); 
    var label_css = document.createAttribute("class"); 
    label_css.nodeValue = "select_css"; 
    label_var.setAttributeNode(label_css); 
    label_var.appendChild(label_text); 
    //返回新标签
    return label_var; 
}

示例2：定义方法创建input标签（主要为Text），并为标签添加id,name,value,type 属性，并绑定事件

 
var createInput = function(id, name, value, type, width, height, event) { 
    var var_input = null; 
    var input_event_attr_IE = "";
    //event表示希望绑定的事件，可能是多个，如果为多个，则拆分一下 
    if (event != null && event != "") { 
        var event_array_IE = event.toString().split('|'); 
        for (var i = 0; i < event_array_IE.length; i++) { 
        var event_IE = event_array_IE[i].split('=='); 
        input_event_attr_IE += " " + event_IE[0] + "='' "; 
    } 
    } 
    try {//定义变量实现IE6.0和IE7.0兼容。 
        var_input = document.createElement("<input " + input_event_attr_IE + ">"); 
    } catch (e) { 
        var_input = document.createElement("input"); 
    } 
    //定义id、name、type、value和style属性
    var input_id = document.createAttribute("id"); 
    input_id.nodeValue = id; 
    var input_name = document.createAttribute("name"); 
    input_name.nodeValue = name; 
    var input_type = document.createAttribute("type"); 
    input_type.nodeValue = type; 
    var input_value = document.createAttribute("value"); 
    input_value.nodeValue = value; 
    var input_style = document.createAttribute("style"); 
    var input_style_str = ""; 
    //设置宽和高
    if (width != null && width != "") { 
        input_style_str += "width:" + width + "px;"; 
    } else { 
        input_style_str += "width:30px;"; 
    } 
    if (height != null && height != "") { 
        input_style_str += "height:" + height + "px;"; 
    } 
    
    if (event != null && event != "") { 
        var event_array = event.toString().split('|'); 
        //循环绑定事件
        for (var i = 0; i < event_array.length; i++) { 
            var events = event_array[i].split('=='); 
            var input_event = document.createAttribute(events[0]); 
            input_event.nodeValue = events[1]; 
            var_input.setAttributeNode(input_event); 
        } 
    } 
    //添加属性
    var_input.setAttributeNode(input_type); 
    input_style.nodeValue = input_style_str; 
    try { 
        var_input.setAttributeNode(input_style); 
    } catch (e) { 
        width = (width == null || width == "") ? "30" : width; 
        var_input.setAttribute("width", width); 
        if (height != null && height != "") { 
            var_input.setAttribute("height", height); 
        } 
    } 
    //为标签添加属性
    var_input.setAttributeNode(input_id); 
    var_input.setAttributeNode(input_name); 
    var_input.setAttributeNode(input_value); 
    
    return var_input; 
}

Answer 2

上楼的可以，不过楼主这个需求很奇怪，
如你只是想控制内容的某一部分，应该事先会知道，可以在之前就为之加上标签，以便于以后控制如
<P>AB<span id="chr1">C</span>DEFG</P>
<script>
document.getElementById("chr1").style.color="#ff0000";
document.getElementById("chr1").style.fontSize="16px";
</script>
如果是想控制页面中选中的内容，则可以参照HMTL编辑器的程序，网上很多的。

Answer 3

可以给你一个别的思路，把你需要显示东西，放一个div里面，开始时候div不显示，有数据时，把div显示出来，就达到你的效果了，有什么问题，可以探讨一下。

Answer 4

不错啊，都做到描红操作了，已经很专业了
我说两句：
<p>X</p>这中间一定是变量输出的如X，
对X进行字符串操作，可以用正则表达式，也可以不用
找到对应文字把样式替换即可

Answer 5

<p id = 'pp'>ABCDEFG<p>
<script type="text/javascript">
document.getElementById('pp').innerHTML='AB<font color=red>C</font>DEFG'
</script>