javascript文本附加

我不知道如何描述这一点，但我相信你会理解，如果你访问此链接。

我想用javascript将文本附加到p元素，我成功了，但是如果文本包含像

这样的标记，那么标记将按原样显示

我应该添加代码来检测html元素，还是可以通过其他方法来检测？

---

如果我添加了检测字体标记的代码，那么如何将标记添加回文本？？？

您可以简单地替换

var textpcopied=$（'.welcome'）.html（）带有
var textcomplied=$（'.welcome'）.text（）
提取不包含任何HTML标记的文本。但是，当然了，你根本拿不回你的标签

更新：一种稍微不同的方法使用jQuery动画将整个标题平滑地滑入视图：

$(document).ready(function(){
    var $title = $('.welcome');
    var twidth = $title.width();
    var theight = $title.height();
    $title.css({
        overflow: 'hidden',
        width: 0,
        whiteSpace: 'nowrap',
        height: theight
    }).animate({
        width: twidth 
    }, 5000); // milliseconds
});

尝试更换：

$('.welcome').append(textcopied.charAt(i));

与：

在代码开始时，写下：

var textHTML  = '';

它可以工作，但看起来不太好：p
你可以做这样的事情。写完所有文本后，用原始文本替换整个html的
welcome
。我承认这不是最好的


css

更新2
通过此更改，覆盖将动态添加到欢迎消息中，宽度不必设置，并且可以轻松处理多行


html

Hi，这里有特殊文本，普通文本

javascript

$(document).ready(function() {
    $('.overlay').css('width', $('div.welcome').css('width'));
    $('.overlay').css('height', $('div.welcome').css('height') + 15);
    var origWidth = $('.overlay').css('width').replace(/px/g,'');
    foobar(origWidth);
});

function foobar(i) {
    if (i > -10) {
        $('.overlay').css('width', i);
        setTimeout(function() {
            foobar(i - 10);
        }, 80);
    }
}

$(document).ready(function() {
    showWelcome();
});

function foobar(i, overlay) {
    if (i > -10) {
        overlay.css('width', i);
        setTimeout(function() {
            foobar(i - 10, overlay);
        }, 80);
    }
    else {
        overlay.remove();
    }
}

function showWelcome() {
    var welcome = $('div.welcome');
    welcome.append('<div class="overlay"></div>');
    welcome.css('position', 'relative');
    var overlay = $('.overlay');

    overlay.css({
        'width': welcome.css('width'),
        'height': (welcome.outerHeight() + 5),
        'position': 'absolute',
        'right': '0',
        'top': '-3px',
        'background-color': '#FFF',
        'z-index': '10'
    });
    var origWidth = overlay.css('width').replace(/px/g, '');
    foobar(origWidth, overlay);
}

$（文档）.ready（函数（）{
showWelcome（）；
});
函数foobar（i，覆盖）{
如果（i>-10）{
overlay.css（'width'，i）；
setTimeout（函数（）{
foobar（i-10，叠加）；
}, 80);
}
否则{
覆盖。删除（）；
}
}
函数showWelcome（）{
var welcome=$（'div.welcome'）；
欢迎。附加（“”）；
欢迎使用.css（'position'，'relative'）；
var overlay=$（'.overlay'）；
overlay.css({
'width'：welcome.css（'width'），
“高度”：（welcome.outerHeight（）+5），
'位置'：'绝对'，
“右”：“0”，
'顶部'：'-3px'，
“背景色”：“FFF”，
“z索引”：“10”
});
var origWidth=overlay.css（'width'）。replace（/px/g'）；
foobar（原始宽度，叠加）；
}
您还可以通过迭代根元素的
contents（）
并逐个输出每个子节点来实现这一点

当处理每个
内容
元素时，如果它是文本节点，就足以输出所有字符并超时。如果不是文本节点，请克隆该节点并将其附加到目标元素。其中的所有字符都可以以相同的方式追加

看到它在这里工作：

$（文档）.ready（函数（）{
var$clonedContent=$（'.welcome'）.clone（）；
$（'.welcome'）。textContent=''；
$（'.welcome'）。文本（''；
treatContents（0，$clonedContent，$（'welcome'））；
函数内容（num、容器、目标）{
var$originalNode=container.contents（）[num]；
var$targetNode；
if（$originalNode.nodeType==3）{
$targetNode=target；
}
否则{
$targetNode=$（container.contents（）[num]）.clone（false，false）.appendTo（target）；
$targetNode.text（“”）；
}
$targetNode.textContent=''；
writeCharacters（$originalNode.textContent，0，$targetNode，num，container，target）；
}
函数writeCharacters（origText、x、target、contNum、contCont、contTarg）{
如果（XD不要使用
font
，使用
span
。如果你只是简单地附加它，效果很好：我的意图是在一段时间后附加每个字母。这就是我的基本问题。更大的问题是
。附加
只允许有效的HTML。按照你的代码，唯一要做的就是提前提取HTML并包装当你再次附加它时，它会围绕着每个角色。基本上，在我看来，你的整个方法是无效的。@pahni尝试使用jQuery
。animate
代替——更新了我的答案。不过guanome的方法更好，我想这是我一直在寻找的，我说我需要在一定的时间间隔后附加，animate会修复整个角色的时间段这意味着如果我有更大的文本，动画就会更快。对不起。@pahni您还可以计算
.text（）的长度
并将其乘以某个常数以获得时间间隔。我的目的是在某个时间段后追加每个字母。这就是答案，Thnx，好主意！@pahnin我更新了我的答案，我想这将是您想要的答案。+1.这是一个好主意，但只适用于一行，并且要求滑动div的长度为known。查看更灵活的（并且可以改进，实际上我不知道JQuery）方法。@XaviLópez宽度不需要知道，只需稍作修改，就可以处理多行。这也很好，虽然我不想阅读复杂的代码，但我喜欢它，因为我可以在任何地方使用它，我只需要为我的p标签添加一个类，除非更新版本的guanome's approachAn异常被抛出
$originalNode
的最后一次迭代，因为
$originalNode
未定义，所以修复了它。感谢修复，@guanome，我知道
的内容会出问题（contNum+1，…
当没有更多的子行时。+1用于更好的多行支持。我的将同时显示所有行，你的将一次显示一行，很好。@guanome嗯，这可能是一个错误或功能，取决于它的预期功能；-）
<div class="welcome">Hi, there <span class="hl">special text</span>, normal text
    <div class="overlay"></div>
</div>

$(document).ready(function() {
    $('.overlay').css('width', $('div.welcome').css('width'));
    $('.overlay').css('height', $('div.welcome').css('height') + 15);
    var origWidth = $('.overlay').css('width').replace(/px/g,'');
    foobar(origWidth);
});

function foobar(i) {
    if (i > -10) {
        $('.overlay').css('width', i);
        setTimeout(function() {
            foobar(i - 10);
        }, 80);
    }
}

.hl{
    color: red;     font-family: helvetica; 
    background: #efefef; 
    color: black; 
    padding: 2px 7px; 
    -moz-box-shadow: 0 1px 1px #CCCCCC; 
    -webkit-box-shadow: 0 1px 1px #CCCCCC; 
    box-shadow: 0 1px 1px #CCCCCC;

}
div.welcome
{
    position: relative;
    width: 500px;
}
.overlay
{
    position: absolute;
    right: 0;
    top: -3px;
    width: 100%;
    height: 25px;
    background-color: #FFF;
    z-index: 10;
}

<div class="welcome">Hi, there <span class="hl">special text</span>, normal text</div>

$(document).ready(function() {
    showWelcome();
});

function foobar(i, overlay) {
    if (i > -10) {
        overlay.css('width', i);
        setTimeout(function() {
            foobar(i - 10, overlay);
        }, 80);
    }
    else {
        overlay.remove();
    }
}

function showWelcome() {
    var welcome = $('div.welcome');
    welcome.append('<div class="overlay"></div>');
    welcome.css('position', 'relative');
    var overlay = $('.overlay');

    overlay.css({
        'width': welcome.css('width'),
        'height': (welcome.outerHeight() + 5),
        'position': 'absolute',
        'right': '0',
        'top': '-3px',
        'background-color': '#FFF',
        'z-index': '10'
    });
    var origWidth = overlay.css('width').replace(/px/g, '');
    foobar(origWidth, overlay);
}

$(document).ready(function(){

    var $clonedContent = $('.welcome').clone();
    $('.welcome').textContent = '';
    $('.welcome').text('');

    treatContents(0, $clonedContent, $('.welcome'));

    function treatContents(num, container, target){
        var $originalNode = container.contents()[num];
        var $targetNode;
        if ($originalNode.nodeType == 3){
            $targetNode = target;
        }
        else{
            $targetNode = $(container.contents()[num]).clone(false, false).appendTo(target);
            $targetNode.text('');
        }
        $targetNode.textContent = '';
        writeCharacters($originalNode.textContent , 0, $targetNode, num, container, target);
    }

    function writeCharacters(origText, x, target, contNum, contCont, contTarg) {
        if(x<origText.length){
           target.append(origText.charAt(x));
            setTimeout(function() { writeCharacters(origText, x+1, target, contNum, contCont, contTarg); }, 80);
        }
        else{
            treatContents(contNum+1, contCont, contTarg);
        }
    }
});

<p class="welcome">Hi, there <b>bold text <i>bold italic text</i></b>, normal text</p>