javascript - HTML in Sweet Alert - Stack Overflow

admin管理员组

文章数量:1287893

This has been answered several times but it seems Sweet Alert has made changes and html:true no longer works, just trying to add a clickable URL

Docs say HTML is no longer used. Instead, use the content object. but they don't really provide any examples

Below code works but displays the entire <a href .... </a> rather than just the CLICK HERE

swal({
  title: "TITLE HERE",
  //text: "<a href='#'>CLICK HERE<a>",
  html: true
});

This has been answered several times but it seems Sweet Alert has made changes and html:true no longer works, just trying to add a clickable URL

Docs say HTML is no longer used. Instead, use the content object. but they don't really provide any examples

Below code works but displays the entire <a href .... </a> rather than just the CLICK HERE

swal({
  title: "TITLE HERE",
  //text: "<a href='#'>CLICK HERE<a>",
  html: true
});

• javascript
• jquery
• sweetalert

Share Improve this question Follow edited Sep 27, 2017 at 19:50 Lawrence Cherone 46.7k77 gold badges6565 silver badges106106 bronze badges asked Sep 27, 2017 at 19:47 WannaBaCODERWannaBaCODER 6111 gold badge11 silver badge66 bronze badges 4

• 2 There is examples: html: $('<div>').html('<a href="#">CLICK HERE<a>') – Lawrence Cherone Commented Sep 27, 2017 at 19:53
• Try putting the content into the html property instead of the text property. Looks like you can use a jQuery object, as well. limonte.github.io/sweetalert2 – Daerik Commented Sep 27, 2017 at 19:53
• again html has been removed from Sweet Alert, search for HTML on sweetalert.js/guides -- can you please post a example? – WannaBaCODER Commented Sep 27, 2017 at 19:55
• @user3228114 you can try with content and pass a custom dom element. – Niladri Commented Sep 27, 2017 at 20:03

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

This code should work . You can use content now with specific DOM element

var el = document.createElement("a");
el.href = "www.stackoverflow.";
el.innerText = "Click here";
swal("Write something here:", {
  content: el,
});

check this here : https://sweetalert.js/docs/#content

as shown in the sample you can pass a slider input to the alert

Here is a working fiddle https://jsfiddle/vq13hac4/2/

Sweet Alert can handle the creation of the html element for you. So the answer by Niladri can be rewritten as:

swal("Write something here:", {
    content: {
        element: "a",
        attributes: {
            href: "http://www.stackoverflow.",
            innerText: "Click here"}}});

@Niladri options is good for Sweet Alert 2.

      var form = document.createElement("div");
      form.innerHTML = `
      <span id="tfHours">0</span> hours<br>
      <input style="width:90%;" type="range" name="tfHours" value=0 step=1 min=0 max=25
      onchange="window.changeHours(this.value)"
      oninput="window.changeHours(this.value)"
      ><br>
      <span id="tfMinutes">0</span> min<br>
      <input style="width:60%;" type="range" name="tfMinutes" value=0 step=5 min=0 max=60
      onchange="window.changeMinutes(this.value)"
      oninput="window.changeMinutes(this.value)"
      >`;

      swal({
        title: 'Request time to XXX',
        text: 'Select time to send / request',
        content: form,
        buttons: {
          cancel: "Cancel",
          catch: {
            text: "Create",
            value: 5,
          },
        }
      }).then((value) => {
        //console.log(slider.value);
      });

I have created a Codepen with a Sweet Alert form data inside. Try it here!

本文标签： javascriptHTML in Sweet AlertStack Overflow