What is a promise in Javascript?

Question

bypabloc_

Asked: 2020-04-05 06:07:30 +0800 CST 2020-04-05 06:07:30 +0800 CST 2020-04-05 06:07:30 +0800 CST

如何使用 jquery 创建一个按钮并包含一个 span 标签？

772

我认为buttonwithjQuery对我有用，但我不能让标签span用html.

$(document).on('click', '#Crear', function() {
        var boton = $('<button/>', {
            'type'  : 'button',
            'class' : 'editar edit-modal btn btn-warning',
            'id'    : 'ButtonEditar',
            'text'    : '<span class="fa fa-edit"></span><span class="hidden-xs"> Editar</span>'
        });
        $( '#contenedor').append(boton.prop('outerHTML'));
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    
<button type="button" id="Crear" class="btn btn-primary">
    <span class="fa fa-plus"></span>
    <span class="hidden-xs"> Agregar</span>
</button>

<div id="contenedor">
</div>

4 Answers

Voted

JuankGlezz · Answer 1 · 2020-04-05T06:18:54+08:00

你只是有一个小错误而不是使用textuse html。

text它仅用于文本并html呈现为DOM

$(document).on('click', '#Crear', function() {
        var boton = $('<button/>', {
            'type'  : 'button',
            'class' : 'editar edit-modal btn btn-warning',
            'id'    : 'ButtonEditar',
            'html'    : '<span class="fa fa-edit"></span><span class="hidden-xs"> Editar</span>'
        });
        $( '#contenedor').append(boton.prop('outerHTML'));
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    
<button type="button" id="Crear" class="btn btn-primary">
    <span class="fa fa-plus"></span>
    <span class="hidden-xs"> Agregar</span>
</button>

<div id="contenedor">
</div>

考虑到@User2930137的提议，只是做了一点小改动，但完全一样，可能稍微复杂一点

.append()修改只包括通过以下方式进行独奏：

.append(
  $('<span />', {
    'class': 'fa fa-edit'
  })
  ,
  $('<span />', {
    'class': 'hidden-xs',
    'text': 'Editar'
  })
);

这里真正要做的是创建两个元素，并在与.append()它们连接时用,.
这避免了像@User2930137.append()这样的两个元素中的两个。$('#contenedor').append(boton.append(span).append(span2));

最终成绩

$(document).on('click', '#Crear', function() {
  var boton = $('<button/>', {
    'type': 'button',
    'class': 'editar edit-modal btn btn-warning',
    'id': 'ButtonEditar'
  }).append(
    $('<span />', {
      'class': 'fa fa-edit'
    }),
    $('<span />', {
      'class': 'hidden-xs',
      'text': 'Editar'
    })
  );

  $('#contenedor').append(boton);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

<button type="button" id="Crear" class="btn btn-primary">
    <span class="fa fa-plus"></span>
    <span class="hidden-xs"> Agregar</span>
</button>

<div id="contenedor">
</div>

lois6b · Answer 2 · 2020-04-05T06:17:49+08:00

在创建按钮之后，而不是将其span放入属性中，然后将其放入textoIDinnerHTML

$(document).on('click', '#Crear', function() {

  if (!document.getElementById("ButtonEditar")) {
    var boton = $('<button/>', {
      'type': 'button',
      'class': 'editar edit-modal btn btn-warning',
      'id': 'ButtonEditar'

    });

    $('#contenedor').append(boton);
    document.getElementById("ButtonEditar").innerHTML = '<span class="fa fa-edit"></span><span class="hidden-xs"> Editar</span>';
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

<button type="button" id="Crear" class="btn btn-primary">
    <span class="fa fa-plus"></span>
    <span class="hidden-xs"> Agregar</span>
</button>

<div id="contenedor">
</div>

user2930137 · Answer 3 · 2020-04-05T07:35:42+08:00

您尝试使用 jQuery 执行此操作的方式是创建三个对象；一个是按钮，另一个是跨度，让它像你想要的那样。

我从@JuankGlezz 借用了代码并修改了此示例所需的内容。

$(document).on('click', '#Crear', function() {
        var boton = $('<button/>', {
            'type'  : 'button',
            'class' : 'editar edit-modal btn btn-warning',
            'id'    : 'ButtonEditar'
        });
        var span = $('<span />', {
            'class' : 'fa fa-edit'
        }); 
        var span2 = $('<span />', {
            'class' : 'hidden-xs',
            'text' : 'Editar'
        });
 
        $('#contenedor').append(boton.append(span).append(span2));
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    
<button type="button" id="Crear" class="btn btn-primary">
    <span class="fa fa-plus"></span>
    <span class="hidden-xs"> Agregar</span>
</button>

<div id="contenedor">
</div>

Jorius · Answer 4 · 2020-04-05T06:19:49+08:00

Jorius

2020-04-05T06:19:49+08:002020-04-05T06:19:49+08:00

您可以从字符串文字创建按钮

$(document).on('click', '#Crear', function() {
  var boton = '<button class="editar edit-modal btn btn-warning" type="button" id="ButtonEditar"><span class="fa fa-edit"></span><span class="hidden-xs"> Editar</span></button>';
  $('#contenedor').append(boton);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

<button type="button" id="Crear" class="btn btn-primary">
    <span class="fa fa-plus"></span>
    <span class="hidden-xs"> Agregar</span>
</button>

<div id="contenedor">
</div>

3

如何使用 jquery 创建一个按钮并包含一个 span 标签？

HTML button that sends you to another page

Why do I get the error "Call to undefined function mysql_connect()"?

How to create an HTML button that works as a link?

How to separate a String in Java. How to use split()

Filter by dates in sql server

How to limit the number of decimal places in a double?

For each in JavaScript?

Position footer ALWAYS glued to the footer

Definitive Guide to Type Conversion in Java

How to properly compare Strings (and objects) in Java?