html 追加文本,javascript文字追加

我想用javascript将文本附加到p元素并且我很成功,但是如果文本包含像< font>这样的标签.标签按原样显示.

我应该添加代码来检测html元素,还是可以通过其他任何方式完成？

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

解决方法:

你可以这样做.一旦写完所有文本,然后用原始文本替换整个欢迎的html.这不是我承认的最好的.

$(document).ready(function() {

var htmlcopied = $('.welcome').html();

var textcopied = $('.welcome').text();

$('.welcome').text('');

function foobar(i) {

if (i < textcopied.length) {

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

setTimeout(function() {

foobar(i + 1);

}, 80);

}

else {

$('.welcome').html(htmlcopied);

}

}

foobar(0);

});

UPDATE

这应该通过不同的方式给你想要的效果.它在原始文本的顶部有一个div,它缓慢显示文本,看起来它正在输入.

例

HTML

Hi, there special text, normal text

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);

}

}

CSS

.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;

}

更新2

通过此更改,叠加层将动态添加到欢迎消息中,不必设置宽度,并且可以轻松地使用多行.

HTML

Hi, there special text, normal text

JavaScript的

$(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('

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);

}

标签：jquery,javascript,append

来源： https://codeday.me/bug/20190610/1209397.html