代码之家 › 专栏 › 技术社区 › GH DevOps

JQuery.append():在<p>内部添加<strong>

jquery html c#

-1

GH DevOps · 技术社区 · 1 年前

我正试图使用jQuery.append()来动态呈现它:

    <div class="alert alert-danger alert-dismissible" role="alert">
       <button type="button" class="close" data-dismiss="alert" style="color: white" aria-label="Close">
        <span aria-hidden="true">&times;</span>
       </button>
       <p>
         <strong>Error!</strong> My error message
       </p>
   </div>

但我似乎无法获得强文本之后的p标记文本。它要么在强文本之前,要么覆盖强文本。这是我尝试过的:

$('#error-div').append(
    $('<div>').prop(
        {
            class: 'my-class-name',
            role: 'alert',
        }
    ).append(
        $('<button>').prop({
            type: 'button',
            class: 'close',
            style: 'color: white',
        }).attr(
            {
                'data-dismiss': 'alert',
                'aria-label': 'Close'
            }
        ).append(
            $('<span>').attr(
                {
                    'aria-hidden': true,
                }).html('&times;')
        )
    ).append(
        $('<p>').append(
            $('<strong>').html('Error! ')
    ).html('My error message')
))

但这会导致:

<div class="alert alert-danger alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close" style="color: white;">
    <span aria-hidden="true">Ã</span>
  </button>
 <p>My error message</p>
</div>

如何在p标记内部、p文本之前获得强标记?

2 回复 | 直到 1 年前

Ahs N 1 年前

我是这样做的:

$('#error-div').append(
    $('<div>').prop(
        {
            class: 'my-class-name',
            role: 'alert',
        }
    ).append(
        $('<button>').prop({
            type: 'button',
            class: 'close',
            style: 'color: white',
        }).attr(
            {
                'data-dismiss': 'alert',
                'aria-label': 'Close'
            }
        ).append(
            $('<span>').attr(
                {
                    'aria-hidden': true,
                }).html('&times;')
        )
    ).append(
        $('<p>').html(
            $('<strong>').html('Error! ')
    ).append('My error message')
));$('#error-div').append(
    $('<div>').prop(
        {
            class: 'my-class-name',
            role: 'alert',
        }
    ).append(
        $('<button>').prop({
            type: 'button',
            class: 'close',
            style: 'color: white',
        }).attr(
            {
                'data-dismiss': 'alert',
                'aria-label': 'Close'
            }
        ).append(
            $('<span>').attr(
                {
                    'aria-hidden': true,
                }).html('&times;')
        )
    ).append(
        $('<p>').html(
            $('<strong>').html('Error! ')
    ).append('My error message')
));

这是 JSFiddle demo

Mark Schultheiss 1 年前

考虑构建节点,然后将它们彼此附加,然后将其全部应用于页面元素。或者使用内容模板,避免复杂性参考: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

注意,我使用了不同的文本,只是为了显示一个和另一个,末尾有J和T。

const sp = $('<p>').html($('<strong>').html('Error!'));
const newSpan = $('<span>').attr({
  'aria-hidden': true
}).html('&times;');

const newButton = $('<button>').prop({
  type: 'button',
  class: 'close',
  style: 'color: white',
}).attr({
  'data-dismiss': 'alert',
  'aria-label': 'Close'
}).append(newSpan);

const newThing = $('<div>').prop({
    class: 'alert alert-danger alert-dismissible',
    role: 'alert',
  })
  .append(newButton)
  .append(sp);

newThing.find('p>strong').after(' My error messageJ');
$("#error-div").html(newThing);

/* all that jQuery ^^ v.s. a content template: */
const errorClone = document.getElementById("alert-template").content.cloneNode(true);
document.body.append(errorClone);

#error-div {
  margin-bottom: 1.5em;
}

.alert.alert-danger {
  background-color: #fF000040;
}

.close {
  background-color: #0040FF40;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="error-div"></div>
<template id="alert-template">
<div class="alert alert-danger alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" style="color: white" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <p>
    <strong>Error!</strong> My error messageT
  </p>
</div>
</template>